建议把临时图片路径放在img中去导出
canvas无法生成图片到系统相册,显示空白[图片] - 预期表现 [图片] - 复现路径 // **分享到朋友圈 sharefriend: function (){ var that = this; wx.getSystemInfo({ success:res =>{ console.log('小程序信息', parseFloat(res.version)); if (parseFloat(res.version) < 6.6){ wx.showModal({ title: '提示', content: '当前微信版本过低,无法使用该功能,请升级到最新微信版本后重试。' }) return false; }else{ that.setData({ share2: true, share: false }); wx.showLoading({ title: '正在生成图片...', mask: true, }); } } }); // 小程序获取图片信息API wx.getImageInfo({ src: that.data.ctxUrl, success: function (res) { console.log(res); that.setData({ ctxUrl: res.path }) }, fail(err) { console.log(err) } }) setTimeout(()=>{ var canvasCtx = wx.createCanvasContext('myCanvas'); canvasCtx.clearRect(0, 0, 0, 0); //绘制背景 canvasCtx.drawImage('../../img/write.png', 0, 0, that.data.windowWidth * 0.8, that.data.windowHeight * 0.8); //绘制名称 canvasCtx.setFontSize(18); canvasCtx.setTextAlign('center'); canvasCtx.fillText(that.data.ctxName, that.data.windowWidth * 0.8 / 2, 120); // 绘制信息 canvasCtx.setFontSize(18); canvasCtx.setTextAlign('center'); canvasCtx.fillText(that.data.ctxRank, that.data.windowWidth * 0.8 / 6, 180); canvasCtx.fillText(that.data.ctxNum, that.data.windowWidth * 0.8 / 2, 180); canvasCtx.fillText(that.data.ctxPoints, (that.data.windowWidth * 4) / 6, 180); // 绘制信息2 canvasCtx.setFontSize(13); canvasCtx.setTextAlign('center'); canvasCtx.fillText('当前排名', that.data.windowWidth * 0.8 / 6, 200); canvasCtx.fillText('得分', that.data.windowWidth * 0.8 / 2, 200); canvasCtx.fillText('净胜分', (that.data.windowWidth * 4) / 6, 200); // 绘制分割线 canvasCtx.drawImage('../../img/line.png', 0, 240, that.data.windowWidth * 0.8, 15); // 比赛项目:羽神等你来战!丰厚礼品等着你 canvasCtx.setFontSize(12); canvasCtx.setTextAlign('center'); canvasCtx.fillText('比赛项目:羽神等你来战!丰厚礼品等着你', that.data.windowWidth * 0.8 / 2.1, 285); // 绘制二维码 canvasCtx.drawImage('../../img/code.jpg', (that.data.windowWidth * 0.8 / 2) - 50, that.data.windowHeight * 0.585, 100, 100); //绘制头像 canvasCtx.save(); canvasCtx.beginPath(); //开始绘制 canvasCtx.arc(that.data.windowWidth * 0.8 / 2, 58, 38, 0, 2 * Math.PI, false); canvasCtx.clip(); canvasCtx.drawImage(that.data.ctxUrl, that.data.windowWidth * 0.8 / 2 - 38, 20, 76, 76); canvasCtx.restore(); canvasCtx.draw(); wx.hideLoading(); }, 1000) }, // 保存绘制的图片 savePic: function () { var that = this; wx.canvasToTempFilePath({ x: 0, y: 0, width: that.data.windowWidth, height: that.data.windowHeight, destWidth: that.data.windowWidth, destHeight: that.data.windowHeight, canvasId: 'myCanvas', success: function (res) { if (!res.tempFilePath) { wx.showModal({ title: '提示', content: '图片绘制中,请稍后重试', showCancel: false }) } util.savePicToAlbum(that,res.tempFilePath); } }) }, // 关闭绘制 closeShare:function(){ this.setData({ share: true, share2: false }) }
2018-10-09解决了 wx.showShareMenu({ withShareTicket: true, }); 需要提前设置,最好在onShareAppMessage之前设置,比如onload,但是还是不知道为什么放在onShareAppMessage中突然没用,刚开始是有的
withShareTicket失效了吗??onShareAppMessage: function() { wx.showShareMenu({ withShareTicket: true, }); return; } 设置失效,进入也无法获取 shareticketL:undefined,sence也是1008,之前还有用,是wx突然出问题了吗?又没遇见过的老哥
2018-09-07要先wx.downFile之后的才能绘制,而且draw()之后需要一定时间才能去生成临时路径
onShareAppMessage使用canvas画图显示不出来大神们好,想canvas画图作为onShareAppMessage的imageUrl,但是为啥我的显示不出来呢?帮看看啥问题吧,非常感谢 //调用cropImg这个函数由imgSrc图片生成一个新的图片保存在headShare 全局变量中 cropImg: function(imgSrc) { wx.getImageInfo({ src: imgSrc, success: function(ret) { var orWidth = ret.width var orHeight = ret.height ctx.drawImage(imgSrc, 0, orHeight * 1 / 10, orWidth, orHeight * 8 / 10, 0, 0, 500, 400); ctx.draw(false, function() { wx.canvasToTempFilePath({ canvasId: 'attendCanvasId', fileType: 'jpg', success: function(resl) { wx.saveFile({//把文件保存到本地 tempFilePath: resl.tempFilePath, success: function(res) { headShare = res.savedFilePath console.log(headShare) } }) } }) //wx.canvasToTempFilePath end }) //ctx.draw end } }) }, //调用onShareAppMessage之前已经生成图片文件并保存到headShare变量中 onShareAppMessage: function(res) { console.log(headShare)//可以打印出图片本地路径 return { title: xitieInfo.title, path: '/pages/showxitie/showxitie', imageUrl: headShare, success: function(res) { console.log('成功', res) }, fail: function(res) { // 转发失败 console.log('失败', res) } } },
2018-09-06ok了 draw()之后不要立刻wx.canvasToTempFilePath, 最好setTimeout(wx.canvasToTempFilePath,给点时间)去取路径, 大概是draw()需要一定时间, 注意, canvasToTempFilePath中的fileType如果选择jpg在Android中可能出现多余的黑色背景,可能是因为透明度问题,不填或者png就行。
canvasToTempFilePath得到的路径能分享吗{title: "1231321", path: "/pages/index/index?id=1", imageUrl: "http://tmp/wx72a406d3a4de4821.o6zAJs9nSTp8WpYG1y2T….xGufqdOAW0Lpf86dd1758aa0717e6fae39cd52753c9a.png"} 这种图片路径在onShareAppMessage中return是白色图 该图片在工具canvas中能正常显示,在iPhone的canvas中一片白,所以导致分享的图也是一片白
2018-09-02