WXML部分:
<view class="img_" style="width: 100%;">
<canvas type="2d" id="canvasId" style="width: 100%;height: 100%" ></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;
res[0].node.width = res[0].node.width * dpr;
res[0].node.height = res[0].node.height * dpr;
// 设置背景图片src
image.src = 'https://pic.imgdb.cn/item/647d31011ddac507cc160e75.jpg'
bg.src = codeimg;
image.onload = function () {
ctx.drawImage(image, 0, 0, 900, 440)
ctx.drawImage(bg, 240, 210, 430, 160);
}
// 将图片保存需要的实例,不写保存可以删除
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();
}
});
}
文章来源地址https://www.toymoban.com/news/detail-640619.html
文章来源:https://www.toymoban.com/news/detail-640619.html
到了这里,关于微信小程序canvas画布绘制base64图片并保存图片到相册中的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!