个人中心 | 微信开放社区

画布在真机模拟中可以正常使用功能（画布生成图片），但在发布小程序成功之后，功能未能正常使用？

[代码]<[代码][代码]canvas[代码] [代码]canvas-id[代码][代码]=[代码][代码]'share'[代码] [代码]style[代码][代码]=[代码][代码]'width:1000px;height:1300px;positon:fixed;left:0;'[代码] [代码]hidden[代码][代码]=[代码][代码]'{{canvasHidden}}'[代码][代码]></[代码][代码]canvas[代码][代码]>[代码] [代码] [代码][代码]<[代码][代码]view[代码] [代码]bindtap[代码][代码]=[代码][代码]'saveImg'[代码] [代码]style[代码][代码]=[代码][代码]"text-align:center;"[代码][代码]><[代码][代码]text[代码][代码]>保存</[代码][代码]text[代码][代码]>[代码] [代码] [代码][代码]<[代码][代码]button[代码] [代码]class[代码][代码]=[代码][代码]'openSetting'[代码] [代码]open-type[代码][代码]=[代码][代码]"openSetting"[代码] [代码]bindopensetting[代码][代码]=[代码][代码]'handleSetting'[代码] [代码]hidden[代码][代码]=[代码][代码]'{{openSettingBtnHidden}}'[代码][代码]>授权</[代码][代码]button[代码][代码]>[代码] [代码] [代码][代码]</[代码][代码]view[代码][代码]>[代码][代码]data: {[代码] [代码]canvasHidden: [代码][代码]true[代码][代码],[代码] [代码]},[代码] [代码]saveImg: [代码][代码]function[代码] [代码](e) {[代码] [代码]var[代码] [代码]that = [代码][代码]this[代码][代码];[代码] [代码]wx.showLoading({[代码] [代码]title: [代码][代码]'正在生成图片...'[代码] [代码]})[代码] [代码]//设置画板显示，才能开始绘图[代码] [代码]that.setData({[代码] [代码]canvasHidden: [代码][代码]false[代码] [代码]})[代码] [代码]const context = wx.createCanvasContext([代码][代码]'share'[代码][代码]);[代码] [代码]//用户头像昵称[代码] [代码]//console.log(that.data.avatarUrl, that.data.nickName)[代码] [代码]let userPath = [代码][代码]'/pages/tool/Business_card_production/Business_production/business/image/lm.png'[代码][代码];[代码] [代码]let userPath1 = [代码][代码]'/pages/tool/Business_card_production/Business_production/business/image/lm1.png'[代码][代码];[代码] [代码]let userwshb = [代码][代码]'/pages/tool/Business_card_production/Business_production/business/image/wshb.png'[代码][代码];[代码] [代码]let userzyjx = [代码][代码]'/pages/tool/Business_card_production/Business_production/business/image/zyjx.png'[代码][代码];[代码] [代码]let useryszf = [代码][代码]'/pages/tool/Business_card_production/Business_production/business/image/yszf.png'[代码][代码];[代码] [代码]let userwshb1 = [代码][代码]'/pages/tool/Business_card_production/Business_production/business/image/wshb_01.png'[代码][代码];[代码] [代码]let userzxt = [代码][代码]'/pages/tool/Business_card_production/Business_production/business/image/zxt.png'[代码][代码];[代码] [代码]let userPhone = [代码][代码]'/pages/tool/Business_card_production/Business_production/business/image/sj.png'[代码][代码];[代码] [代码]let userAddress = [代码][代码]'/pages/tool/Business_card_production/Business_production/business/image/dz.png'[代码][代码];[代码] [代码]let userLxxx = [代码][代码]'/pages/tool/Business_card_production/Business_production/business/image/lxxx.png'[代码][代码];[代码] [代码]let userEwm = [代码][代码]'/pages/tool/Business_card_production/Business_production/business/image/ewm.png'[代码][代码];[代码] [代码]let userEwm2 = [代码][代码]'/pages/tool/Business_card_production/Business_production/business/image/ewm_02.png'[代码][代码];[代码] [代码]let userEwm1 = [代码][代码]'/pages/tool/Business_card_production/Business_production/business/image/ewm_01.png'[代码][代码];[代码] [代码]let userSzx = [代码][代码]'/pages/tool/Business_card_production/Business_production/business/image/szx.png'[代码][代码];[代码] [代码]let userSzx1 = [代码][代码]'/pages/tool/Business_card_production/Business_production/business/image/szx1.png'[代码][代码];[代码] [代码]let jxz = [代码][代码]'/pages/tool/Business_card_production/Business_production/business/image/canvasjxz.png'[代码][代码];[代码] [代码]let jxy = [代码][代码]'/pages/tool/Business_card_production/Business_production/business/image/canvasjxy.png'[代码][代码];[代码] [代码]//开始绘制[代码] [代码]context.stroke();[代码] [代码]context.rect(0, 0, 1000, 1300);[代码] [代码]context.setFillStyle([代码][代码]'white'[代码][代码]);[代码] [代码]context.fill();[代码] [代码]context.drawImage(userwshb, 300, 60);[代码] [代码]context.drawImage(userzxt, 20, 300);[代码] [代码]//边框[代码] [代码]context.setStrokeStyle([代码][代码]'#FBC000'[代码][代码]);[代码] [代码]context.strokeRect(0, 0, 995, 600);[代码] [代码]context.setStrokeStyle([代码][代码]'#FBC000'[代码][代码]);[代码] [代码]context.strokeRect(2, 2, 995, 595);[代码] [代码]context.setStrokeStyle([代码][代码]'#FBC000'[代码][代码]);[代码] [代码]context.strokeRect(4, 4, 990, 590);[代码] [代码]context.setStrokeStyle([代码][代码]'#FBC000'[代码][代码]);[代码] [代码]context.strokeRect(7, 7, 985, 585);[代码] [代码]context.setStrokeStyle([代码][代码]'#FBC000'[代码][代码]);[代码] [代码]context.strokeRect(10, 10, 980, 580);[代码] [代码]context.setStrokeStyle([代码][代码]'#FBC000'[代码][代码]);[代码] [代码]context.strokeRect(12, 12, 976, 576);[代码] [代码]context.setFontSize(43)[代码] [代码]context.setFillStyle([代码][代码]"#000"[代码][代码])[代码] [代码]context.fillText([代码][代码]'小海'[代码][代码], 67, 433)[代码] [代码]context.drawImage(userLxxx, 360, 400);[代码] [代码]context.setFontSize(25)[代码] [代码]context.setFillStyle([代码][代码]"#333"[代码][代码])[代码] [代码]context.fillText([代码][代码]'13012334246'[代码][代码], 430, 433)[代码] [代码]context.setFontSize(25)[代码] [代码]context.setFillStyle([代码][代码]"#333"[代码][代码])[代码] [代码]context.fillText([代码][代码]'gz'[代码][代码], 430, 536)[代码] [代码]context.save(); [代码][代码]// 先保存状态[代码] [代码]context.beginPath();[代码] [代码]context.arc(500, 670, 80, 0, Math.PI * 2, [代码][代码]false[代码][代码]);[代码] [代码]context.setFontSize(50)[代码] [代码]context.drawImage(userPath1, 140,680);[代码] [代码]context.setFontSize(42) [代码][代码]//文字大小[代码] [代码]context.setFillStyle([代码][代码]"#F2AC3C"[代码][代码]) [代码][代码]//文字颜色[代码] [代码]context.fillText([代码][代码]"集团"[代码][代码], 108, 886);[代码][代码]//1,左,2,上[代码] [代码]context.drawImage(userEwm2, 112,925);[代码] [代码]//边框[代码] [代码]context.setStrokeStyle([代码][代码]'#FBC000'[代码][代码]);[代码] [代码]context.strokeRect(0, 600, 995, 598);[代码] [代码]context.setStrokeStyle([代码][代码]'#FBC000'[代码][代码]);[代码] [代码]context.strokeRect(2, 600, 995, 595);[代码] [代码]context.setStrokeStyle([代码][代码]'#FBC000'[代码][代码]);[代码] [代码]context.strokeRect(4, 600, 990, 596);[代码] [代码]context.setStrokeStyle([代码][代码]'#FBC000'[代码][代码]);[代码] [代码]context.strokeRect(7, 600, 985, 600);[代码] [代码]context.setStrokeStyle([代码][代码]'#FBC000'[代码][代码]);[代码] [代码]context.strokeRect(10, 600, 980, 596);[代码] [代码]context.setStrokeStyle([代码][代码]'#FBC000'[代码][代码]);[代码] [代码]context.strokeRect(12, 600, 976, 594);[代码] [代码]context.setStrokeStyle([代码][代码]'#FBC000'[代码][代码]);[代码] [代码]context.strokeRect(14, 600, 975, 592);[代码] [代码]//szx[代码] [代码]context.drawImage(userSzx1, 460, 650);[代码] [代码]//文字[代码] [代码]context.setFontSize(42) [代码][代码]//文字大小[代码] [代码]context.setFillStyle([代码][代码]"#000"[代码][代码]) [代码][代码]//文字颜色[代码] [代码]context.fillText([代码][代码]"业务范围"[代码][代码], 620, 740);[代码][代码]//1,左,2,上[代码] [代码]context.setFontSize(33) [代码][代码]//文字大小[代码] [代码]context.setFillStyle([代码][代码]"#F8C26D"[代码][代码]) [代码][代码]//文字颜色[代码] [代码]context.fillText([代码][代码]"•"[代码][代码], 590, 830);[代码][代码]//1,左,2,上[代码] [代码]context.setFontSize(30) [代码][代码]//文字大小[代码] [代码]context.setFillStyle([代码][代码]"#353231"[代码][代码]) [代码][代码]//文字颜色[代码] [代码]context.fillText([代码][代码]"办理及打造"[代码][代码], 610, 830);[代码][代码]//1,左,2,上[代码] [代码]context.setFontSize(33) [代码][代码]//文字大小[代码] [代码]context.setFillStyle([代码][代码]"#F8C26D"[代码][代码]) [代码][代码]//文字颜色[代码] [代码]context.fillText([代码][代码]"•"[代码][代码], 590, 890);[代码][代码]//1,左,2,上[代码] [代码]context.setFontSize(30) [代码][代码]//文字大小[代码] [代码]context.setFillStyle([代码][代码]"#353231"[代码][代码]) [代码][代码]//文字颜色[代码] [代码]context.fillText([代码][代码]"配套专用"[代码][代码], 610, 890);[代码][代码]//1,左,2,上[代码] [代码]context.setFontSize(33) [代码][代码]//文字大小[代码] [代码]context.setFillStyle([代码][代码]"#F8C26D"[代码][代码]) [代码][代码]//文字颜色[代码] [代码]context.fillText([代码][代码]"•"[代码][代码], 590, 950);[代码][代码]//1,左,2,上[代码] [代码]context.setFontSize(30) [代码][代码]//文字大小[代码] [代码]context.setFillStyle([代码][代码]"#353231"[代码][代码]) [代码][代码]//文字颜色[代码] [代码]context.fillText([代码][代码]"支付通道"[代码][代码], 610, 950);[代码][代码]//1,左,2,上[代码] [代码]context.setFontSize(33) [代码][代码]//文字大小[代码] [代码]context.setFillStyle([代码][代码]"#F8C26D"[代码][代码]) [代码][代码]//文字颜色[代码] [代码]context.fillText([代码][代码]"•"[代码][代码], 590, 1008);[代码][代码]//1,左,2,上[代码] [代码]context.setFontSize(30) [代码][代码]//文字大小[代码] [代码]context.setFillStyle([代码][代码]"#353231"[代码][代码]) [代码][代码]//文字颜色[代码] [代码]context.fillText([代码][代码]"资产打造"[代码][代码], 610, 1008);[代码][代码]//1,左,2,上[代码] [代码]context.setFontSize(33) [代码][代码]//文字大小[代码] [代码]context.setFillStyle([代码][代码]"#F8C26D"[代码][代码]) [代码][代码]//文字颜色[代码] [代码]context.fillText([代码][代码]"•"[代码][代码], 590, 1070);[代码][代码]//1,左,2,上[代码] [代码]context.setFontSize(30) [代码][代码]//文字大小[代码] [代码]context.setFillStyle([代码][代码]"#353231"[代码][代码]) [代码][代码]//文字颜色[代码] [代码]context.fillText([代码][代码]"评估及修复"[代码][代码], 610, 1070);[代码][代码]//1,左,2,上 [代码] [代码]//把画板内容绘制成图片，并回调画板图片路径[代码] [代码]context.draw([代码][代码]false[代码][代码], [代码][代码]function[代码] [代码]() {[代码] [代码]wx.hideLoading()[代码] [代码]// wx.showLoading({[代码] [代码]// title: '保存中...',[代码] [代码]// })[代码] [代码]wx.canvasToTempFilePath({[代码] [代码]x: 0,[代码] [代码]y: 0,[代码] [代码]width: 1000,[代码] [代码]height: 1202,[代码] [代码]destWidth: 1000,[代码] [代码]destHeight: 1200,[代码] [代码]canvasId: [代码][代码]'share'[代码][代码],[代码] [代码]success: [代码][代码]function[代码] [代码](res) {[代码] [代码]that.setData({[代码] [代码]shareImgPath: res.tempFilePath,[代码] [代码]canvasHidden: [代码][代码]true[代码] [代码]})[代码] [代码]//预览[代码] [代码]wx.previewImage({[代码] [代码]current: [代码][代码]'that.data.shareImgPath'[代码][代码],[代码] [代码]urls: [that.data.shareImgPath][代码] [代码]})[代码] [代码]if[代码] [代码](!res.tempFilePath) {[代码] [代码]wx.hideLoading()[代码] [代码]wx.showModal({[代码] [代码]title: [代码][代码]'提示'[代码][代码],[代码] [代码]content: [代码][代码]'图片绘制中，请稍后重试'[代码][代码],[代码] [代码]showCancel: [代码][代码]false[代码] [代码]})[代码] [代码]}[代码] [代码]//绘制成功后将图片保存到用户相册[代码] [代码]//绘制成功后将图片保存到用户相册[代码] [代码]wx.saveImageToPhotosAlbum({[代码] [代码]filePath: res.tempFilePath,[代码] [代码]//保存成功失败之后，都要隐藏画板，否则影响界面显示。[代码] [代码]success: (res) => {[代码] [代码]//console.log(res)[代码] [代码]wx.hideLoading()[代码] [代码]wx.showToast({[代码] [代码]title: [代码][代码]'已保存！'[代码][代码],[代码] [代码]icon: [代码][代码]'none'[代码][代码],[代码] [代码]showCancel: [代码][代码]false[代码][代码],[代码] [代码]success: [代码][代码]function[代码] [代码](res) {[代码] [代码]that.setData({[代码] [代码]canvasHidden: [代码][代码]true[代码] [代码]})[代码] [代码]}[代码] [代码]})[代码] [代码]},[代码] [代码]fail: (err) => {[代码] [代码]console.log(err)[代码] [代码]wx.hideLoading()[代码] [代码]wx.showModal({[代码] [代码]title: [代码][代码]'失败请重试！'[代码][代码],[代码] [代码]content: [代码][代码]''[代码][代码],[代码] [代码]showCancel: [代码][代码]false[代码][代码],[代码] [代码]success: [代码][代码]function[代码] [代码](res) {[代码] [代码]that.setData({[代码] [代码]canvasHidden: [代码][代码]true[代码] [代码]})[代码] [代码]}[代码] [代码]})[代码] [代码]}[代码] [代码]})[代码] [代码]}[代码] [代码]})[代码] [代码]});[代码] [代码]this[代码][代码].onHide();[代码] [代码]wx.getSetting({[代码] [代码]success(res) {[代码] [代码]if[代码] [代码](!res.authSetting[[代码][代码]'scope.writePhotosAlbum'[代码][代码]]) {[代码] [代码]wx.authorize({[代码] [代码]scope: [代码][代码]'scope.writePhotosAlbum'[代码][代码],[代码] [代码]success() {[代码] [代码]//这里是用户同意授权后的回调[代码] [代码]that.saveImgToLocal();[代码] [代码]},[代码] [代码]fail() {[代码][代码]//这里是用户拒绝授权后的回调[代码] [代码]that.setData({[代码] [代码]openSettingBtnHidden: [代码][代码]false[代码] [代码]})[代码] [代码]}[代码] [代码]})[代码] [代码]} [代码][代码]else[代码] [代码]{[代码][代码]//用户已经授权过了[代码] [代码]that.saveImgToLocal();[代码] [代码]}[代码] [代码]}[代码] [代码]})[代码] [代码]}[代码] [代码]},[代码] [代码]saveImgToLocal: [代码][代码]function[代码] [代码](e) {[代码] [代码]let that = [代码][代码]this[代码][代码];[代码] [代码]let imgSrc1 = [代码][代码]''[代码][代码];[代码] [代码]imgSrc1 = that.data.imgs;[代码] [代码]//.let countImage=imgSrc+imgSrc1;[代码] [代码]wx.downloadFile({[代码] [代码]url: imgSrc1,[代码] [代码]success: [代码][代码]function[代码] [代码](res) {[代码] [代码]console.log(res);[代码] [代码]//图片保存到本地[代码] [代码]wx.saveImageToPhotosAlbum({[代码] [代码]filePath: res.tempFilePath,[代码] [代码]success: [代码][代码]function[代码] [代码](data) {[代码] [代码]wx.showToast({[代码] [代码]title: [代码][代码]'保存成功'[代码][代码],[代码] [代码]icon: [代码][代码]'success'[代码][代码],[代码] [代码]duration: 2000[代码] [代码]})[代码] [代码]},[代码] [代码]})[代码] [代码]}[代码] [代码]})[代码] [代码]},[代码]

GitHub账号

选择需要上架的开放服务

案例类型