话不多说,先上代码
<template>
<view>
<canvas canvas-id="myCanvas" style="width:600rpx;height:800rpx;background-color: azure;">
</canvas>
<button @click="save">保存</button>
</view>
</template>
<script>
export default {
data() {
return {
imageUrl: "https://test.shop.baihuitimes.com/web_img/3.png",
qrcodeData: 'https://test.shop.baihuitimes.com/web_img/4.png',
avatarUrl: 'https://test.shop.baihuitimes.com/web_img/1.png'
};
},
onReady() {
this.testCtx();
},
methods: {
async testCtx() {
const ctx = uni.createCanvasContext('myCanvas', this);
const width = uni.upx2px(600); // 将600rpx转换为像素单位
const height = uni.upx2px(800); // 将800rpx转换为像素单位
const avatarSize = 20; // 头像的大小
const avatarX = 60; // 头像的x坐标
const avatarY = 140; // 头像的y坐标
// 下载图片到本地
const [image, qrcode, avatar] = await Promise.all([
uni.downloadFile({ url: this.imageUrl }),
uni.downloadFile({ url: this.qrcodeData }),
uni.downloadFile({ url: this.avatarUrl })
]);
// 绘制背景图片 参数分别是:图片路径、左上角x坐标、左上角y坐标、绘制的宽度、绘制的高度
ctx.drawImage(image.tempFilePath, 0, 0, width, height);
// 绘制二维码
ctx.drawImage(qrcode.tempFilePath, 80, 190, 140, 140);
// 保存当前的画布状态
ctx.save();
// 创建圆形路径
ctx.beginPath();
// 移动到圆心 参数分别是:圆心的x坐标、圆心的y坐标、圆的半径、起始弧度、终止弧度、是否逆时针
ctx.arc(avatarX + avatarSize / 2, avatarY + avatarSize / 2, avatarSize / 2, 0, Math.PI * 2, false);
// 将绘制区域限制在圆形路径内
ctx.clip();
// 绘制头像
ctx.drawImage(avatar.tempFilePath, avatarX, avatarY, avatarSize, avatarSize);
// 恢复到最近一次保存的画布状态
ctx.restore();
// 绘制文本
ctx.setFontSize(16)
ctx.fillText('佰汇时代', 90, 155)
// 绘制到画布上
ctx.draw()
},
save() {
uni.canvasToTempFilePath({
canvasId: 'myCanvas',
success: function (res) {
uni.saveImageToPhotosAlbum({
filePath: res.tempFilePath,
success: function () {
uni.showToast({
title: '保存成功',
icon: 'none'
})
},
fail: function () {
uni.showToast({
title: '保存失败',
icon: 'none'
})
}
})
},
fail: function (res) {
console.log(res);
uni.showToast({
title: '保存失败',
icon: 'none'
})
}
});
}
}
};
</script>
<style></style>
也可以这样直接写本地图片路径
async testCtx() {
const ctx = uni.createCanvasContext('myCanvas', this);
const width = uni.upx2px(600); // 将600rpx转换为像素单位
const height = uni.upx2px(800); // 将800rpx转换为像素单位
const avatarSize = 20; // 头像的大小
const avatarX = 60; // 头像的x坐标
const avatarY = 140; // 头像的y坐标
// 下载图片到本地
// const [image, qrcode, avatar] = await Promise.all([
// uni.downloadFile({ url: this.imageUrl }),
// uni.downloadFile({ url: this.qrcodeData }),
// uni.downloadFile({ url: this.avatarUrl })
// ]);
// 绘制背景图片
ctx.drawImage('/static/4.png', 0, 0, width, height);
// 绘制二维码
ctx.drawImage('/static/5.png', 80, 190, 140, 140);
// 保存当前的画布状态
ctx.save();
// 创建圆形路径
ctx.beginPath();
ctx.arc(avatarX + avatarSize / 2, avatarY + avatarSize / 2, avatarSize / 2, 0, Math.PI * 2, false);
// 将绘制区域限制在圆形路径内
ctx.clip();
// 绘制头像
ctx.drawImage('/static/3.png', avatarX, avatarY, avatarSize, avatarSize);
// 恢复到最近一次保存的画布状态
ctx.restore();
// 绘制文本
ctx.setFontSize(16)
ctx.fillText('佰汇时代', 90, 155)
// 绘制到画布上
ctx.draw()
},
反正和ui确定好尺寸距离就好啦
注意事项:canvas是在onReady生命周期运行的。还有就是<canvas canvas-id="myCanvas">
</canvas> 这个是 canvas-id不是id!!!
还有就是这一步
看返回值,不要直接就写 image.tempFilePath