WXML部分:(尽量用px,不用百分比)
<view class="img_" style="width: 400px;">
<canvas type="2d" id="canvasId" style="width: 400px;height: 500px"></canvas>
<button style="margin: auto;width: 70%;margin-top: 10px;" bindtap="saves">保存图片</button>
</view>
样式可以根据自己的需要去调整
canvas 绘制成图片部分:
//写在接口成功回调中
const fs = wx.getFileSystemManager();
var codeimg = wx.env.USER_DATA_PATH + '/' + '.jpg';
fs.writeFile({
filePath: codeimg,
data: res.data.slice(22), // code就是接口返回的base64数据(分割掉前面的data:image/png;base64,)
encoding: 'base64',
success: () => {
// console.log(codeimg);
wx.createSelectorQuery().select('#canvasId').fields({
node: true,
size: true
})
.exec((res) => {
console.log(res);
let ctx = res[0].node.getContext('2d'); //getContext返回Canvas 的绘图上下文
let canvas = res[0].node;
const bg = canvas.createImage();
const image = canvas.createImage();
const dpr = wx.getSystemInfoSync().pixelRatio;
let {width,height} = res[0].node
res[0].node.width = width * dpr;
res[0].node.height = height * dpr;
console.log(width,dpr);
// 设置图片src
image.src = 'https://pic.imgdb.cn/item/647d31011ddac507cc160e75.jpg'
bg.src = codeimg;
image.onload = function () {
ctx.drawImage(image, 0, 0, width * dpr, height * dpr);
ctx.drawImage(bg, 240, 210, 430, 160);
// ctx.draw();
}
// ctx.draw()
console.log(ctx);
that.setData({
ctx:canvas
})
})
},
})
图片保存功能:
首先获取用户相册权限。
// 检查用户是否已经授权
wx.getSetting({
success: (res) => {
if (!res.authSetting['scope.writePhotosAlbum']) {
// 如果用户未授权,则向用户请求授权
wx.authorize({
scope: 'scope.writePhotosAlbum',
success: () => {
console.log('授权成功')
},
fail: () => {
console.log('授权失败')
}
})
} else {
console.log('已经授权')
}
}
})
保存到相册:
// 保存图片
saves() {
let _this = this;
wx.canvasToTempFilePath({
// 把画布转化成临时文件
x: 0,
y: 0,
width: 380, // 截取的画布的宽
height: 600, // 截取的画布的高
destWidth: 380, // 保存成的画布宽度
destHeight: 600, // 保存成的画布高度
fileType: 'jpg', // 保存成的文件类型
quality: 1, // 图片质量
//如果图片不是2D的话,就需要使用canvasId属性,详情请查看微信小程序官方文档
canvas:_this.data.ctx, // 画布实例
success(res) {
// 2-保存图片至相册
wx.saveImageToPhotosAlbum({
// 存成图片至手机
filePath: res.tempFilePath,
success(res2) {
wx.hideLoading();
wx.showToast({
title: '保存成功',
duration: 2000
});
},
fail(res3) {
if (res3.errMsg === 'saveImageToPhotosAlbum:fail auth deny') {
wx.showToast({
title: '保存失败,稍后再试',
duration: 2000,
icon: 'none'
});
wx.hideLoading();
} else {
wx.showToast({
title: '保存失败,稍后再试',
duration: 2000,
icon: 'none'
});
wx.hideLoading();
}
}
});
},
fail(err) {
console.log(err);
wx.showToast({
title: '保存失败,稍后再试',
duration: 2000,
icon: 'none'
});
wx.hideLoading();
}
});
}