drawImage 绘图，IDE测试正常，到了真机上测试。显示空白
发布于 6 年前 作者 xtao 18408 次浏览 来自 问答

wxml代码如下

<view class="canvas-box">
    <canvas style="width:300px;height:530px;" canvas-id="mycanvas"/>
</view>

js文件代码如下

var context = wx.createContext();      

//二维码
var qrcodepath = "网站域名/static/images/iconfont-clear.png";
context.drawImage(qrcodepath, 102, 230, 110, 110);
 
//绘制图片
wx.drawCanvas({
      canvasId: "mycanvas",
      actions: context.getActions()
});
//将生成好的图片保存到本地
wx.canvasToTempFilePath({
  canvasId: 'mycanvas',
  success: function success(res) {
    wx.saveImageToPhotosAlbum({
        wx.showToast({
          title: '图片生成成功',
          icon: 'loading',
          duration: 2000
        });
      }
    });
  }
});

IDE测试结果

手机预览。未能生成，只是一张透明图片

，另外，如果图片是本地的。则生成正常。网络图片一律失败

所以考虑到时候网络图片不行，就将图片下载。然后使用下载后的图，一样失败

下载过程如下

downpic:function(){
   console.log("开始下载图片");
   var that=this;
   var qrcodepath = "网站域名/static/images/iconfont-clear.png";
   wx.downloadFile({
     url: qrcodepath,
     type: 'image',
     success: function (file) {
        wx.saveFile({
         tempFilePath: file.tempFilePath,
         success: function (r) {
           console.log("qrcode：" + r.savedFilePath);
           that.setData({ qrcode_path: r.savedFilePath })
         }
       })
     },
     fail: function (err) {
       console.log(err)
     }
   })
 }

不知道如何解决这个问题，如果有人碰到过，请多多指教。谢谢

6 回复

好的，我测试下

谢谢

好的，谢谢

我只能假装我这个 异步setTimeout 在drawImage 之后

draw是异步，下个版本会提供回调函数，工具也会修复。目前请延迟一下再调用canvasToTempFilePath

downloadFile 要配置域名哦

drawImage 网络地址必须下载后绘制

开发的时候的域名，点击不校验

而且 绘制 要在 图片下载成功之后，考虑异步的情况

域名配置的，下载后提示保存路径为http//store/*****
然后也是考虑到异步问题。我加了setTimeout 也是无效，你有参考例子吗？

回到顶部