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

电玩女神 2022-10-10 04:57 300阅读 0赞

### 目录 ###

*  绘制海报 保存分享
 *  图片的临时路径获取方式
 *  关于不同机型上的自适应问题
 *  关于调试能显示，正式环境不能显示的问题

# 绘制海报 保存分享 #

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

--------------------

准备一个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(\{\}) 引起

翻看[微信官方文档][Link 1]

可以看到  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0FJQl9LYXNpYw_size_16_color_FFFFFF_t_70]  
需要在小程序后台配置你需要获取临时路径的图片的域名（https）  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0FJQl9LYXNpYw_size_16_color_FFFFFF_t_70 1]  
![在这里插入图片描述][20210628155626976.png]

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

![在这里插入图片描述][20210628155749605.png]

[Link 1]: https://developers.weixin.qq.com/miniprogram/dev/api/media/image/wx.getImageInfo.html
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0FJQl9LYXNpYw_size_16_color_FFFFFF_t_70]: /images/20221005/c056eca3035c421bb91fd5ad38f1ceae.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0FJQl9LYXNpYw_size_16_color_FFFFFF_t_70 1]: /images/20221005/bc6e48cee82241ba836e0ce16c2e456d.png
[20210628155626976.png]: /images/20221005/7fe68d70c5584b409789d84edc6ecef3.png
[20210628155749605.png]: /images/20221005/b53cdb565be94163ac201d907a9961de.png