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

相关推荐

  1. uniApp 2图片叠加指定位置

    2024-02-23 13:20:02       54 阅读
  2. uniapp 页面滚动指定位置的方法

    2024-02-23 13:20:02       28 阅读
  3. uniapp vu3 scroll-view 滚动指定位置

    2024-02-23 13:20:02       39 阅读
  4. uniapp 上传多图片django后端

    2024-02-23 13:20:02       53 阅读
  5. 如何canvas画布变成img图片

    2024-02-23 13:20:02       25 阅读

最近更新

  1. docker php8.1+nginx base 镜像 dockerfile 配置

    2024-02-23 13:20:02       98 阅读
  2. Could not load dynamic library ‘cudart64_100.dll‘

    2024-02-23 13:20:02       106 阅读
  3. 在Django里面运行非项目文件

    2024-02-23 13:20:02       87 阅读
  4. Python语言-面向对象

    2024-02-23 13:20:02       96 阅读

热门阅读

  1. 物联网中基于WiFi的室内温度检测系统设计

    2024-02-23 13:20:02       45 阅读
  2. EPSON机器人与PC上位机软件C#网络TCP通讯

    2024-02-23 13:20:02       50 阅读
  3. SpringBoot 使用 JWT 保护 Rest Api 接口

    2024-02-23 13:20:02       42 阅读
  4. websoket

    2024-02-23 13:20:02       50 阅读
  5. vue+electron 自动更新

    2024-02-23 13:20:02       48 阅读
  6. 【LeetCode周赛】第 385 场周赛

    2024-02-23 13:20:02       62 阅读
  7. QT-Day2

    QT-Day2

    2024-02-23 13:20:02      44 阅读
  8. 网页数据的解析提取(Beautiful Soup库详解)

    2024-02-23 13:20:02       54 阅读
  9. 冬眠...

    2024-02-23 13:20:02       56 阅读
  10. 分布式场景怎么Join,一文讲解

    2024-02-23 13:20:02       51 阅读
  11. 数仓面试题整理(2)

    2024-02-23 13:20:02       49 阅读
  12. [前端]开启VUE之路-NODE.js版本管理

    2024-02-23 13:20:02       49 阅读