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(); } }); }
