【微信小程序】Canvas绘画海报保存分享---持续更新一系列问题

绘制海报 保存分享

• 准备一个canvas容器
• 直接开始画 淦它丫的！ 从简到繁

---

准备一个canvas容器

<canvas canvas-id="shareBox"></canvas>

直接开始画
先画几个字试试，后面再慢慢画

 		const ctx = wx.createCanvasContext('shareBox');
        ctx.setFillStyle('#fff')  //背景颜色
        ctx.fillRect(0, 0, 1000, 1005) //填充背景范围
        ctx.setFontSize(18);
        ctx.setFillStyle("#484a3d");
        ctx.fillText('测试', 48 * rpx, 214 * rpx);

这段找个函数放进去

//画图片

ctx.drawImage(imgUrl, 0, 0, 400, 174);

//ctx.drawImage(imgUrl, 图片左边距, 图片上边距, 图片宽度, 图片高度);
//imgUrl 是图片的临时路径

图片的临时路径获取方式

wx.getImageInfo({
      src: '图片路径',
      success: function (res) {
        that.setData({
          imgUrl: res.path
        })
      }
    })

学会了这几个就十有八九了 自己一行一行慢慢拼凑 就ok了 当然实际操作也会有很多细节需要修整，比如字体换行…等等…自行百度加入

---

画好了 最后一步

        ctx.draw(false, () => {
          wx.canvasToTempFilePath({
            canvasId: 'shareBox',
            quality: 1,
            success: result => {
              console.log('result->', result);
              that.setData({
                drawImage: result.tempFilePath
              })
            }
          }, this)
        });

// drawImage 生成的图片临时路径，可以放在image显示
//wx.canvasToTempFilePath 只能放在ctx.draw 里面 才能生成图片

把生成的图片放进image里面，去实现保存等功能

---

2021.06.28

关于不同机型上的自适应问题

如果按照上面的画是会在不同的机型上面有错位的画面出现，要解决这种问题，就必须自适应，利用iphone6 1:1 的特性 我们可以这样做

 // 获取rpx 方便画图
      let that = this;
      wx.getSystemInfo({
        success: function (res) {
          console.log('res->', res);
          let rpx = res.windowWidth / 375;
          that.setData({
            rpx
          })
        },
      })

你可以在绘画前 让这段代码执行 并使用 如：

ctx.setFontSize(18);
ctx.setFillStyle("#484a3d");
ctx.fillText('你好', 48 * rpx, 214 * rpx);

如果要确保自适应 应该所有的组成元素都需要使用 *rpx 确保同步

关于调试能显示，正式环境不能显示的问题

可能的问题
wx.getImageInfo({}) 引起

翻看微信官方文档

可以看到

需要在小程序后台配置你需要获取临时路径的图片的域名（https）

不想频繁提交版本测试的话 可以把开发工具对于忽略http的选项去掉 测试 如下图