uniApp中 将2一张图片叠加到指定位置

 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);
                      },
                    });
                  });
            })
          },

原文地址：https://blog.csdn.net/qq_36947128/article/details/136236145

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！