1.获取systemInfo

const systemInfo = uni.getSystemInfoSync();

2.需要截图的元素列表

const resultList = [
{ id: 1, z-index: 0, url: 'https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png' },
{ id: 2, z-index: 10, url: 'https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png' },
{ id: 3, z-index: 20, url: 'https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png' },
{ id: 4, z-index: -1, url: 'https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png' },
];
resultList.sort((a, b) => a.z_index - b.z_index);

3.使用canvas把所有元素统一截图保存

const drawCanvas = () => {
const dpr = systemInfo.pixelRatio;
console.log("systemInfo.pixelRatio", systemInfo.pixelRatio);
// 获取canvas
const query = wx.createSelectorQuery();
query
.select("#canvas-container")
.fields({
node: true,
size: true,
})
.exec((res) => {
const canvas = res[0].node;
// 小程序版本现在只支持canvas2d，不能使用老版canvas截图了
const ctx = canvas.getContext("2d");
// 保存的截图宽高
res[0].node.width = 216 * dpr;
res[0].node.height = 384 * dpr;
// 定义一个异步函数来处理每个元素
async function processItem(item: any) {
return new Promise((resolve) => {
console.log("forEach", item.type);
const img = canvas.createImage();
img.src = item.url;
img.onload = () => {
console.log("类型", item.type);
// 先保存一下设置
ctx.save();
// 最后画出来
ctx.drawImage(
img,
item.x ? item.x * dpr : 0,
item.y ? item.y * dpr : 0,
item.width * dpr,
item.height * dpr
);
// 不要忘记恢复之前的设置
ctx.restore();
resolve(true);
};
img.onerror = (err) => {
console.log("onerror", err);
resolve(true);
};
});
}
// 使用async函数来包裹整个循环
async function processItems(arr) {
for (const item of arr) {
await processItem(item); // 等待当前异步操作完成
}
}
// 调用函数
processItems(resultList)
.then(() => {
console.log("All items processed.");
// canvas转文件的临时路径 (本地路径)
wx.canvasToTempFilePath({
x: 0,
y: 0,
width: 216,
height: 384,
destWidth: 216 * dpr,
destHeight: 384 * dpr,
canvas,
fileType: "jpg",
quality: 1,
success: (res) => {
console.log("res.tempFilePath", res);
// 将canvas图片上传到阿里oss云服务器（有接口就调用后端接口上传图片）
uploadFileToOSS(res.tempFilePath, resultList);
},
fail: (err) => {
console.log("err", err);
uni.hideLoading();
},
});
})
.catch((error) => {
console.error("Error processing items:", error);
uni.hideLoading();
});
});
};
drawCanvas();

4.官方插件 wxml-to-canvas

如果想要使用截图库可以使用这个插件，只不过可能会有一些坑（比如不是原生小程序开发，使用uniapp的时候）。这个文章可以解决一部分问题：wxml-to-canvas使用过坑记录