实现给图片添加logo或者生成海报，其原理是使用canvas，用canvas绘制出想要的图片进行保存
1.在wxml文件中添加canvas
canvs层级太高，所以将它定位到屏幕外，不影响页面
<view style='width:0px;height:0px;overflow:hidden;position: absolute;top:-1000px;'>
<canvas canvas-id='myCanvas' style='width:500px;height:500px;'></canvas>
</view>
1.上传图片
chooseImg(){
wx.chooseImage({
count:1,
success: (res)=>{
if (res.errMsg == "chooseImage:ok"){
this.setData({
headImg: res.tempFilePaths[0]
})
}
}
})
},
2.获取添加的logo图标
//生成头像
creatHead(){
//调用接口，获取添加到头像的icon图标
// WXAPI.getIcon() 调用接口
WXAPI.getIcon().then(res=>{
//将网络图片转换为本地图片（res.data:图片地址）
this.handleNetImg(res.data).then((resImg, err)=>{
if (err){
wx.showToast({
title: '图片获取错误',
icon: "none"
})
return;
}
this.setData({
headIcon: resImg.path
})
//绘制头像
this.creatCanvas();
})
})
},
//网络图片转为本地图片
handleNetImg(imagePath) {
return new Promise((resolve, reject) => {
wx.getImageInfo({
src: imagePath,
success: (res) => {
resolve(res);
},
fail: (res) => {
reject(res)
}
});
});
},
生成海报与给图片添加logo的不同点在于获取小程序码
//QrCodedata 传给后端参数
let QrCodedata = {
scene: "fromNumber=" + this.data.FNumber,
page: "pages/login/login",
width: 400,
}
//获取小程序码（我这里获取到的是Base64）
WXAPI.shareQRCode(QrCodedata).then(res=> {
let imgPath = wx.env.USER_DATA_PATH + '/index' + 'qrcode' + '.png';
let imageData = res.data.replace(/^data:image\/\w+;base64,/, "");
let fs = wx.getFileSystemManager();
fs.writeFileSync(imgPath, imageData, "base64");
this.headIcon = imgPath;
})
3.绘制canvas
// 绘制头像
creatCanvas(){
let _this = this;
let ctx = wx.createCanvasContext('myCanvas', _this );
//drawImage 的参数查找官网
ctx.drawImage(this.data.headImg, 20, 20, 460, 460); //绘制上传的照片
ctx.drawImage(this.data.headIcon, 345, 340, 150, 150);//绘制添加的logo图片
ctx.draw(true, () => {
setTimeout(() => {
wx.canvasToTempFilePath({
canvasId: 'myCanvas',
success: (res) => {
//将绘制完成的图片赋值给变量
this.setData({
showImg: res.tempFilePath,
})
},
fail: () => {
wx.hideLoading();
wx.showToast({
title: '生成失败！',
icon: "none"
})
},
}, _this);
}, 300);
});
},
4.canvas画完了，接着就是保存它
//保存图片前判断是否拥有保存到相册权限
getPhotosAlbumAuth() {
var _this = this;
wx.getSetting({
success(res) {
if (res.authSetting['scope.writePhotosAlbum']) {
_this.saveImg();
} else if (res.authSetting['scope.writePhotosAlbum'] === undefined) {
wx.authorize({
scope: 'scope.writePhotosAlbum',
success() {
_this.saveImg();
},
fail() {
wx.showToast({
title: '您没有授权，无法保存到相册',
icon: 'none'
})
}
})
} else {
wx.openSetting({
success(result) {
if (result.authSetting['scope.writePhotosAlbum']) {
_this.saveImg();
} else {
uni.showToast({
title: '您没有授权，无法保存到相册',
icon: 'none'
})
}
}
})
}
}
})
},
//保存头像
saveImg() {
var _this = this;
wx.saveImageToPhotosAlbum({
filePath: _this.data.showImg,
success(data) {
wx.showToast({
title: "图片保存成功",
icon: "success",
mask: true
})
},
})
},
