shareBackgroundImage:是我们的主要背景图
guidedCodeImg:是我们需要插入指定位置的图片
其他变量在函数注释中都已经标记清楚
- //生成图片
- drawImages() {
- const ctx = uni.createCanvasContext('myCanvas');
- // 图片 A
- ctx.drawImage(this.promotionItem.shareBackgroundImage, 0, 0, 375, 532); // 你需要根据实际图片尺寸调整这里的参数
- // 图片 B 在 A 的位置
- const centerX = 188; // 图片 A 的宽度的位置
- const centerY = 378; // 图片 A 的高度位置
- const centerImageWidth = 93; // 图片 B 的宽度
- const centerImageHeight = 93; // 图片 B 的高度
-
- ctx.drawImage(this.promotionItem.guidedCodeImg, centerX - centerImageWidth / 2, centerY - centerImageHeight / 2, centerImageWidth, centerImageHeight);
- this.$nextTick(()=>{
- ctx.draw(false, () => {
- uni.canvasToTempFilePath({
- x: 0,
- y: 0,
- width: 375, // 你的 canvas 宽度
- height: 532, // 你的 canvas 高度
- destWidth: 375*2, // 保存图片的宽度
- destHeight: 532*2, // 保存图片的高度
- canvasId: 'myCanvas',
- quality:1,
- success: (res) => {
- this.qrCodeImg = res.tempFilePath;
- },
- fail: (err) => {
- console.error('canvasToTempFilePath failed', err);
- },
- });
- });
- })
- },