微信小程序生成海报 / 两张图片合并生成一张

一张背景图,一个二维码,生成一张全屏海报,二维码位于右下角(二维码位置可以调整)

方法思路:使用微信小程序的canvas组件

1、获取canvas组件定义一个canvas上下文
2、获取设备信息,将设备宽高设置为canvas画布的大小
3、在图片加载完成后开始绘制,可以调整绘制图片的起始位置坐标以及大小
4、绘制完成后将canvas转成图片
5、下载到图库
javascript 复制代码
<canvas type="2d" id="myCanvas"></canvas>
javascript 复制代码
handleImg() {
    try {
      const query = wx.createSelectorQuery();
      query.select('#myCanvas')
      .fields({
        node: true,
        size: true
      })
      .exec((res) => {
        const canvas = res[0].node;
        const ctx = canvas.getContext('2d');
        const systemInfo = wx.getSystemInfoSync();
        const dpr = systemInfo.pixelRatio;
        const { windowWidth, windowHeight } = systemInfo
        // 根据设备的像素比 把画布设为全屏
        canvas.width = windowWidth * dpr;
        canvas.height = windowHeight * dpr;
        ctx.scale(dpr, dpr)
        let that = this
        const img = canvas.createImage();
        img.src = '第一张图片的url';
        img.onload = () => {
          const qrcodeImg = canvas.createImage();
          qrcodeImg.src = '第二张图片的url'
          qrcodeImg.onload = () => {
          	// 绘制第一张图片
            ctx.drawImage(img, 0, 0, windowWidth, windowHeight);
            // 绘制第二张图片
            ctx.drawImage(qrcodeImg, windowWidth - 100, windowHeight - 100, 60, 60);
            // 延时保存图片
            setTimeout(() => {
              wx.canvasToTempFilePath({
                canvas,
                destWidth: windowWidth * dpr,
                destHeight: windowHeight * dpr,
                success(res) {
                  console.log('生成的图片路径:', res.tempFilePath);
                  that.saveImageToAlbum(res.tempFilePath)
                },
                fail(err) {
                  console.error('canvasToTempFilePath 保存失败:', err);
              });
            }, 500);
          }
        };
      });
    } catch (err) {
      console.log('trycatch失败',err)
    }
  },
  saveImageToAlbum(filePath) {
    wx.saveImageToPhotosAlbum({
      filePath: filePath,
      success(res) {
        wx.showToast({
          title: '保存成功',
          icon: 'success',
          duration: 2000
        });
      },
      fail(err) {
        console.error('保存失败:', err);
      }
    });
  },

注意:

  • 等图片加载完成后开始绘制
  • 绘制完成后稍加延迟再转成图片

把图片链接准备好替换代码中的占位文字即可运行

有问题欢迎留言交流~

相关推荐
2501_915918412 天前
iOS 上架全流程指南 iOS 应用发布步骤、App Store 上架流程、uni-app 打包上传 ipa 与审核实战经验分享
android·ios·小程序·uni-app·cocoa·iphone·webview
00后程序员张2 天前
iOS App 混淆与加固对比 源码混淆与ipa文件混淆的区别、iOS代码保护与应用安全场景最佳实践
android·安全·ios·小程序·uni-app·iphone·webview
破无差2 天前
《赛事报名系统小程序》
小程序·html·uniapp
00后程序员张2 天前
详细解析苹果iOS应用上架到App Store的完整步骤与指南
android·ios·小程序·https·uni-app·iphone·webview
海绵宝宝不喜欢侬3 天前
uniapp-微信小程序分享功能-onShareAppMessage
微信小程序·小程序·uni-app
2501_915106323 天前
Xcode 上传 ipa 全流程详解 App Store 上架流程、uni-app 生成 ipa 文件上传与审核指南
android·macos·ios·小程序·uni-app·iphone·xcode
亮子AI3 天前
【小程序】微信小程序隐私协议
微信小程序·小程序
weixin_177297220693 天前
短剧小程序系统开发:打造个性化娱乐新平台
小程序·娱乐·短剧
weixin_lynhgworld3 天前
剧本杀小程序系统开发:开启沉浸式社交娱乐新纪元
小程序·娱乐
~废弃回忆 �༄3 天前
mobx-miniprogram小程序的数据传输
小程序