收藏
回答

canvas无法生成图片到系统相册,显示空白

框架类型 问题类型 API/组件名称 终端类型 微信版本 基础库版本
小程序 Bug canvas 客户端 6.5.3 2.3.0



- 预期表现



- 复现路径


// **分享到朋友圈

 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

   })

 }


回答关注问题邀请回答
收藏

3 个回答

登录 后发表内容