小程序drawImage（）绘制网络图片生成图片保存到本地真机不显示

最新推荐文章于 2024-08-15 10:09:56 发布

衣乌安、

最新推荐文章于 2024-08-15 10:09:56 发布

阅读量7.7k

点赞数

分类专栏：小程序文章标签：小程序 canvas drawImage

随意转载，但请注明出处。倘若略有收获，望不吝点赞

本文链接：https://blog.csdn.net/zsy_snake/article/details/81193426

版权

小程序专栏收录该内容

10 篇文章 0 订阅

订阅专栏

标题有点绕，问题是这样的：小程序用canvas绘制一包含图片的内容使用自带的API：drawImage，然后将其生成图片保存到相册，pc端模拟器可以完美实现，然而真机生成图片没有所绘制的图片。

原因是这样的：

首先看小程序官方文档上drawImage的用法：

const ctx = wx.createCanvasContext('myCanvas')

wx.chooseImage({
  success: function(res){
    //res.tempFilePaths[0] 为图片路径
    ctx.drawImage(res.tempFilePaths[0], 0, 0, 150, 100)；
    ctx.draw()；
  }
})

而问题所在就是该方法的第一个参数，图片路径这里。

小程序的canvas绘制图片，图片路径必须为本地的路径，而不能是网络路径。

因此在绘制网络图片时必需先将其保存到本地然后在绘制。当我们在加载一个带有图片的页面时，图片都会被暂存到本地，由此我们可以通过wx.gerImageInfo接口访问本地的暂存路径来调用drawImage方法绘制图片。如下：（注意网络图片的地址一定要在合法域名内）

  //获取网络图片本地路径
          wx.getImageInfo({
            src: that.data.qrCodeUrl,//服务器返回的图片地址
            success: function (res) {
              //res.path是网络图片的本地地址
              let Path = res.path;
              that.setData({
                localQrCodeUrl: Path
              })
            },
            fail: function (res) {
              //失败回调
            }
          });

如上获取本地暂存路径后，再调用drawImagre方法即可

base64图片的话参考下面评论的那哥们总结的吧：https://blog.csdn.net/weixin_42421494/article/details/83015303