1、最近在做小程序的分享图的时候,后台返回的背景图和小程序码网络图片。canvas不能绘制网络的图片和base64形式的图片。
2、现在的做法是先把图片下载到本地。就是 wx.downloadFile( )。
3、先绘制多张网络的图片，有可能会出现小图先加载大图后加载。导致出现的图片没有完全绘制出来。
4、说了这么多，直接上代码。
5、网络图片的地址一定要在小程序后台——开发设置downloadfile域名。如果不配置域名，会出现开发工具是可以。在真机中打开调试工具也是可以生成分享图的，但是在真机上关闭调试工具就会报错。
downfile(url){//下载网络图片的promise对象
return new Promise(function (resolve, reject) {
wx.downloadFile({
url:url ,
success: function (res) {
resolve(res.tempFilePath)
}
})
})
},
onLoad: function (options) {
wx.showLoading({
title: '努力生成中...'
})
var that=this;
//网络图片一定要在后台小程序那设置服务器的域名 downloadFile合法域名
var avatar = "https://wx.qlogo.cn/mmopen/vi_32/Q0j4TwGTfTIC6rA7qoOZicxAj9cPLBfx7ykSjxgW1RYYhdic1c522ic1uYlQ5xOTZq0Oia3GFIRve3T00b7QjAlLPA/132"
var photo=
"https://t1.huanqiu.cn/992df16f9c31415271942b41c6f9c44a.jpg";
var promise1 = that.downfile(photo);
var promise2 = that.downfile(avatar)
Promise.all([
promise1, promise2
]).then(res => {
// console.log(res) 就是所有的网络图片都下载到本地后在绘制图像。
const ctx = wx.createCanvasContext('shareImg')
ctx.drawImage(res[0], 0, 0, 545, 771)
ctx.drawImage( res[1], 158, 190, 210, 210)
ctx.draw(true)
return res;
}).then(res => {
console.log(res);
if (res.length == 2) {
setTimeout(function () {
that.share();//这个是把canvas绘制图片的函数
}, 1000);/如果不设置时间定时器图片会出不来。
}
})
},
share: function () {
var that = this
that.savaImageToPhoto();
wx.getSetting({
success(res) {
console.log(res);
if (!res.authSetting['scope.writePhotosAlbum']) {
//没有获取授权
wx.authorize({
scope: 'scope.writePhotosAlbum',
success(res) { //这里是用户同意授权后的回调
that.setData({
saveImgBtnHidden: true,
openSettingBtnHidden: false,
})
},
fail(res) {////这里是用户拒绝授权后的回调
that.setData({
saveImgBtnHidden: false,
openSettingBtnHidden: true,
})
}
})
}else{//有授权的功能
//获取授权后的
that.setData({
saveImgBtnHidden: true,
openSettingBtnHidden: false,
})
}
}
})
},
/**
* 保存到相册
*/
save: function () {
var that = this
//生产环境时 记得这里要加入获取相册授权的代码
wx.saveImageToPhotosAlbum({
filePath: that.data.prurl,
success(res) {
console.log(res)
wx.showToast({
title:'图片保存到相册',
mask: false,
icon:'success',
success:function(){
}
})
},
fail(err){
console.log(err)
}
})
},5.后续会继续更新小程序的问题。