使用Canvas绘制网络图片在模拟器上可以显示，在真机上不显示


Page({


/**
* 页面的初始数据
*/
data: {
hidden: true
},


/**
* 生命周期函数--监听页面加载
*/
onLoad: function(options) {



var giftName = options.giftName
var coverImage = options.coverImage
var joinedCount = options.joinedCount
var giftId = options.giftId


console.log(giftName + "==" + coverImage + "==" + joinedCount + "==" + giftId)


let promise1 = new Promise(function(resolve, reject) {
wx.getImageInfo({
src: coverImage,
success: function(res) {
resolve(res);
}
})
});
let promise2 = new Promise(function(resolve, reject) {
wx.getImageInfo({
src: '../../img/qrbg.png',
success: function(res) {
resolve(res);
}
})
});
Promise.all([
promise1, promise2
]).then(res => {
console.log(res[0].path)
const ctx = wx.createCanvasContext('shareImg')


//主要就是计算好各个图文的位置
ctx.drawImage(res[0].path, 158, 190, 210, 210)
ctx.drawImage('../../' + res[1].path, 0, 0, 545, 771)


ctx.setTextAlign('center')
ctx.setFillStyle('#ffffff')
ctx.setFontSize(22)
ctx.fillText('分享文字描述1', 545 / 2, 130)
ctx.fillText('分享文字描述2', 545 / 2, 160)


ctx.stroke()
ctx.draw()
})
},



/**
* 生成分享图
*/
share: function() {
var that = this
wx.showLoading({
title: '努力生成中...'
})
wx.canvasToTempFilePath({
x: 0,
y: 0,
width: 545,
height: 771,
destWidth: 545,
destHeight: 771,
canvasId: 'shareImg',
success: function(res) {
console.log(res.tempFilePath);
that.setData({
prurl: res.tempFilePath,
hidden: false
})
wx.hideLoading()
},
fail: function(res) {
console.log(res)
}
})
},


/**
* 保存到相册
*/
save: function() {
var that = this
//生产环境时 记得这里要加入获取相册授权的代码
wx.saveImageToPhotosAlbum({
filePath: that.data.prurl,
success(res) {
wx.showModal({
content: '图片已保存到相册，赶紧晒一下吧~',
showCancel: false,
confirmText: '好哒',
confirmColor: '#72B9C3',
success: function(res) {
if (res.confirm) {
console.log('用户点击确定');
that.setData({
hidden: true
})
}
}
})
}
})


}
})

微信小程序开发问题解答