微信小程序canvas绘制图片的注意事项---不能是网络图片

最新推荐文章于 2025-01-01 04:25:38 发布

原创最新推荐文章于 2025-01-01 04:25:38 发布 · 3.3k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#微信小程序canvas绘图 #小程序canvas绘制图片 #小程序canvas绘制图片不能是网络图片

微信小程序同时被 2 个专栏收录

20 篇文章

订阅专栏

小程序开发

18 篇文章

订阅专栏

本文介绍了一个关于在真实设备上使用canvas绘制网络图片遇到的问题及解决方案。作者发现真机不支持直接绘制网络图片，导致在开发者工具中正常显示的图片，在真机上无法显示。通过下载图片到本地再进行绘制的方法成功解决了这一问题。

上周五做了个需求，用canvas画图并保存到本地，没在手机上测试，今天看的时候突然发现：

drawImage(imageResource, dx, dy, dWidth, dHeight)
其中imageResource真机不支持网络图片的绘制

所以就是明明在开发者工具上都是好的，但是在真机上测试的时候图片是绘制不出来的，想保存的地方也保存为空。
那么既然只能绘制本地的图片，而我们使用的图片又大都是接口返回的图片链接，所以首要想到的就是把图片保存到本地，然后再进行绘制即可。

    var that = this;
    var context = wx.createCanvasContext('firstCanvas');
    applyApi1.postJson('xxxxx/xxxxxxxxxxxxxx',{},res => {
      console.log("res",res)
      wx.downloadFile({
        url: res.imgUrl,
        success: function (res) {
          console.log(res);
          var imgUrl= res.tempFilePath;
          context.drawImage(imgUrl, 40, 130, 220, 220)
          context.draw()
        }, fail: function (fres) {
        
        }
      })
    })

我这边已经解决完了，就不复现回去上对比图了，反正就是网络图片在真机上展示不出来是一片空白的，开发者工具是好的，这样解决就会解决这个问题。