为了账号安全,请及时绑定邮箱和手机立即绑定

微信小程序分享图,利用canvas制图,保存手机,为什么是空白的啊,跟手机系统有关系?

微信小程序分享图,利用canvas制图,保存手机,为什么是空白的啊,跟手机系统有关系?

森林海 2019-03-15 17:15:51
HTML<view class='vw'>    <canvas canvas-id='myCanvas' style='width:375px;height:667px;background:#f5f5f5;'>    </canvas>    <button class='btn' bindtap='abc'>    保存图片    </button></view>javascriptonReady: function (e) {    //这是canvas将图片放在canvas上    var ctx = wx.createCanvasContext('myCanvas')    var imgPath = 'http://up.qqjia.com/z/23/tu27726_2.jpg'    var bgImgPath = 'http://img.keaiq.com/d/file/15155477475202100.jpg'    var smallage = 'https://t2.38mt.com/tempx/11/11767/3762-73772.jpg'    ctx.setFillStyle('#ffffff')    ctx.fillRect(0,520,600,280)    ctx.drawImage(imgPath, 100, 120,180,260)    ctx.drawImage(smallage, 220, 320,60,60)    ctx.drawImage(bgImgPath, 30,520,80,100)    ctx.setFillStyle('#6f6f6f')    ctx.font = "18px Arial";    ctx.fillText('歪歪歪', 110,580)    ctx.draw()    setTimeout(() => {      this.canvasImg()    }, 700)  }//转换 canvasImg: function () {   console.log(123)   var that = this   // 画布转成图片   wx.canvasToTempFilePath({     canvasId: 'myCanvas',     x: 0,     y: 0,     width: 375,     height: 667,     //生成图片的大小     destWidth: 375,     destHeight: 667,     success: function (res) {       wx.hideLoading()       console.log(res.tempFilePath, 'canvas画图片呀')       that.setData({         img: res.tempFilePath       })     }   }) }然后到手机上面会是全部空白的,存电脑上还能显示,但是还带着按钮 存手机上就是空白的
查看完整描述

1 回答

?
繁花如伊

TA贡献2012条经验 获得超12个赞

小程序不能直接使用网络图片,也就是说你上面使用的图片的地址,需要先调用小程序的wx.downloadFile方法,将返回的本地路径绘制到canvas。绘制完成后,再调用保存到相册那个方法就行了。


查看完整回答
反对 回复 2019-03-19
  • 1 回答
  • 0 关注
  • 1271 浏览
慕课专栏
更多

添加回答

举报

0/150
提交
取消
微信客服

购课补贴
联系客服咨询优惠详情

帮助反馈 APP下载

慕课网APP
您的移动学习伙伴

公众号

扫描二维码
关注慕课网微信公众号