欢迎您访问 最编程 本站为您分享编程语言代码,编程技术文章!
您现在的位置是: 首页

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

最编程 2024-02-23 18:18:37
...

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