需要，uniapp 微信小程序将页面某一部分保留为图片能够分享，下载。实现这一性能须要应用 canvas 绘图，背景图为网络图片，两头有个原型的二维码，图片格式为 base64，还有一些其余的文字。
最重要的是：无论是网络图片还是 base64 格局的，拿到一个长期地址！！！办法参考此文章
注：base64 能够间接 canvas 绘制，然而真机不显示！！！模拟器失常！
// 绘制 canvas
<canvas style="width: 280px;height:380px" canvas-id="activityCode" ></canvas>
// 上面两个办法是将 base64 图片转换成长期地址
function removeSave(FILE_BASE_NAME = 'tmp_base64src', format = 'jpg') {return new Promise((resolve) => {
// 把文件删除后再写进，避免超过最大范畴而无奈写入
const fsm = uni.getFileSystemManager(); // 文件管理器
const FILE_BASE_NAME = 'tmp_base64src';
const filePath = `${wx.env.USER_DATA_PATH}/${FILE_BASE_NAME}.${format}`;
fsm.unlink({
filePath: filePath,
success(res) {console.log('文件删除胜利');
resolve(true);
},
fail(e) {console.log('readdir 文件删除失败：', e);
resolve(true);
}
});
})
}
function base64ToSave(base64data: any, FILE_BASE_NAME = 'tmp_base64src') {const fsm = uni.getFileSystemManager();
return new Promise(async (resolve, reject) => {
//format 这个跟 base64 数据的结尾对应
const [, format, bodyData] = /data:image\/(\w+);base64,(.*)/.exec(base64data) || [];
if (!format) {reject(new Error('ERROR_BASE64SRC_PARSE'));
}
await removeSave(FILE_BASE_NAME, format);
const filePath = `${wx.env.USER_DATA_PATH}/${FILE_BASE_NAME}.${format}`;
//const buffer = wx.base64ToArrayBuffer(bodyData);
fsm.writeFile({
filePath,
data: bodyData,
//data: base64data.split(";base64,")[1],
encoding: 'base64',
success() {resolve(filePath);
},
fail() {reject(new Error('ERROR_BASE64SRC_WRITE'));
},
});
});
}
// 开始绘制
//1. 背景网络图片
function drawCanvas() {const ctx = uni.createCanvasContext('activityCode')
uni.getImageInfo({
src: '****',
success:res=>{
// 背景图
ctx.drawImage(res.path, 0, 0, 140, 190); // 插入图片
// 绘制文案
ctx.setFontSize(9)
ctx.fillStyle='#FFFFFF'
ctx.setTextAlign('center')
ctx.fillText('***', 70, 40)
// 绘制一个原型的图片
circleImg(ctx)
ctx.draw()},
fail:res=>{console.log(` 缓存失败：${res.errMsg}`);
}
})
}
//2. 绘制圆形图片
function circleImg(ctx) {ctx.beginPath()
ctx.arc(70, 100, 34, 0, 2 * Math.PI)
ctx.setFillStyle('#ffffff')
ctx.fill()
ctx.clip()
//url 就是上方保留的 base64 长期地址
ctx.drawImage(url, 40, 70, 60, 60);
}
// 保留图片
function saveImg() {
uni.canvasToTempFilePath({
canvasId: 'activityCode',
success: function(res) {
uni.saveImageToPhotosAlbum({
filePath: res.tempFilePath,
success: function () {
uni.showToast({
title: '保留胜利',
icon: 'success'
})
},
fail: function () {
uni.showToast({
title: '保留失败',
icon: 'none'
})
}
})
}
})
}注：保留图片的时候最好不要写尺寸，否则会影响生成图片的清晰度！
效果图：
本文参加了 SegmentFault 思否写作挑战赛，欢送正在浏览的你也退出。