收藏
回答

canvas生成的图片第一次保存会全部空白(透明?),第二次才正常。

框架类型 问题类型 API/组件名称 终端类型 微信版本 基础库版本
小程序 Bug wx.createCanvasContext 客户端 6.7.2 2.3.2 [181]

canvas生成的图片第一次保存会全部空白(透明?),第二次才正常。求解啊!!急得不要不要的!!

代码:

createPhoto: function() {

let that = this;

wx.showLoading({

title: '图片生成中',

})

// 获取背景图片本地路径

let promise1 = new Promise(function(resolve, reject) {

wx.getImageInfo({

src: that.data.bgi,

success: function(res) {

console.log(111, res)

resolve(res);

},

fail: function(res) {

reject(res)

}

})

})

// 获取顶部头像本地路径

let promise2 = new Promise(function(resolve, reject) {

wx.getImageInfo({

src: that.data.avatarUrl,

success: function(res) {

console.log(222, res)

resolve(res);

},

fail: function(res) {

reject(res)

}

})

})

// 获取底部自己头像本地路径

let promise3 = new Promise(function(resolve, reject) {

wx.getImageInfo({

src: that.data.avatarUrl2,

success: function(res) {

console.log(333, res)

resolve(res);

},

fail: function(res) {

reject(res)

}

})

});

// 获取底部第一个头像本地路径

let promise4 = new Promise(function(resolve, reject) {

wx.getImageInfo({

src: that.data.beforeAvatar,

success: function(res) {

console.log(444, res)

resolve(res);

},

fail: function(res) {

reject(res)

}

})

});

// 获取底部第二个头像本地路径

let promise5 = new Promise(function(resolve, reject) {

wx.getImageInfo({

src: that.data.afterAvatar,

success: function(res) {

console.log(555, res)

resolve(res);

},

fail: function(res) {

reject(res)

}

})

});

// 获取皇冠本地路径

let promise6 = new Promise(function (resolve, reject) {

wx.getImageInfo({

src: "https://dreamate.top/2.png",

success: function (res) {

console.log(666, res)

resolve(res);

},

fail: function (res) {

reject(res)

}

})

});

// 执行

Promise.all(

[promise1, promise2, promise3, promise4, promise5, promise6]

).then(res => {

console.log(res)

// 获取宽高

let wW = that.data.windowWidth;

let wH = that.data.windowHeight;

// 定义画布上下文常量

const ctx = wx.createCanvasContext('firstCanvas');

//背景白色

ctx.setFillStyle('white');

//从x=0,y=0开始绘制白色

// ctx.fillRect(0, 0, wW, wH);

if (that.data.ranking == 1) {

console.log(111)

//背景图

ctx.drawImage(res[0].path, 0, 0, wW, wH);

//顶部头像

ctx.drawImage(res[1].path, 10, 5, 90, 85);

//底部第一张头像

ctx.drawImage(res[2].path, 67, 560, 70, 70);

//底部第二张头像

ctx.drawImage(res[3].path, 177, 560, 55, 55);

//底部第三张头像

ctx.drawImage(res[4].path, 267, 560, 55, 55);

//皇冠

ctx.drawImage(res[5].path, 90, 545, 30, 30);


// 绘制文字

ctx.setFontSize(20)

ctx.setFillStyle("#fff")

ctx.fillText(that.data.userName, 100, 50)

// 绘制文字

ctx.setFontSize(26)

ctx.setFillStyle("#000")

ctx.fillText(that.data.ranking, wW * 0.49, wW * 1.38)

/*保存上下文 绘制 */

// ctx.save();

ctx.draw();


//destWidth值越大图片越清晰/大小成正比 解决画布模糊的问题

wx.canvasToTempFilePath({

canvasId: 'firstCanvas',

width: wW,

height: wH,

destWidth: wW * 3,

destHeight: wH * 3,

success: function success(res) {

console.log('转图片结果');

// 关闭loading

wx.hideLoading();

wx.showLoading({

title: '图片保存中...',

})

// 到page对象的data中

that.setData({

previewImageUrl: res.tempFilePath

})

console.log(res)

wx.saveImageToPhotosAlbum({

filePath: that.data.previewImageUrl,

success(res) {

wx.hideLoading();

wx.showToast({

title: '保存成功!',

icon: 'success'

})

//保存成功

console.log(res);

},

fail: function (res) {

wx.showToast({

icon: 'fail',

title: 'sorry 保存失败,请稍后再试',

})

return;

}

})

},

complete: function complete(e) {

console.log(e.errMsg);

}

});

}

}).

catch(err => {

//error 错误处理

})

},


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

3 个回答

  • XiaoRui
    XiaoRui
    2019-10-18

    救命


    2019-10-18
    有用
    回复
  • Bn
    Bn
    2018-10-28

    ctx.draw()回调生成图片,参考canvasToTempFilePath接口文档

    2018-10-28
    有用
    回复 2
    • 七芋圆全
      七芋圆全
      2018-10-28

      真的就是这个问题,解决了 谢谢你

      2018-10-28
      回复
    • 奈何
      奈何
      2021-02-25回复七芋圆全
      怎么解决的,我写到回调里,第二次都是纯白色了
      2021-02-25
      回复
  • 七芋圆全
    七芋圆全
    2018-10-27

    救命啊~~快来个人回答啊~~!!!

    2018-10-27
    有用
    回复
登录 后发表内容