收藏
回答

如何在新版canvas接口使用云储存的图片?

net::ERR_NAME_NOT_RESOLVED

function coverCanvas() {
  var headCoUrl = 'cloud://****18635e09448b.jpg';
  query.select('#myCanvas')
    .fields({
      node: true,
      size: true
    })
    .exec(async function () {
      let canvas = res[0].node;
      let ctx = canvas.getContext('2d');
      let imgOb = canvas.createImage();

      canvas.width = 100;
      canvas.height = 100;
      imgOb.onload = () => {
        // run other
      }
      imgOb.onerror = err=>{
        // 触发err 错误如截图
      }
      imgOb.src = await loadImage(headCoUrl);
    });

  function loadImage(cloudUrl) {
    return Promise((resolve, reject) => {
      wx.cloud.downloadFile({
        fileID: cloudUrl,
        success: res => {
          resolve(res.tempFilePath)
        },
        fail: res => reject
      });
    });
  }
}
最后一次编辑于  2020-04-13
回答关注问题邀请回答
收藏

1 个回答

  • ㊙️
    ㊙️
    2020-04-13

    已经解决,还是要利用canvas原生解决方案,读取文件base64

    function coverCanvas() {
      var headCoUrl = 'cloud://****18635e09448b.jpg';
      query.select('#myCanvas')
        .fields({
          node: true,
          size: true
        })
        .exec(async function () {
          let canvas = res[0].node;
          let ctx = canvas.getContext('2d');
          let imgOb = canvas.createImage();
    
    
          canvas.width = 100;
          canvas.height = 100;
          imgOb.onload = () => {
            // run other
          }
          imgOb.onerror = err=>{
          }
          imgOb.src = await loadImage(headCoUrl);
        });
    
    
      function loadImage(cloudUrl) {
        return Promise((resolve, reject) => {
          wx.cloud.downloadFile({
            fileID: cloudUrl,
            success: res => {
            
              //重点来了
              let fs = wx.getFileSystemManager();
              fs.readFile({
                filePath: res.tempFilePath,
                encoding:'base64',
                success: function(res){
                  console.log(res);
                  pm.resolve(`data:image/png;base64,${res.data}`)
                }
              })
              resolve(res.tempFilePath)
            },
            fail: res => reject
          });
        });
      }
    }
    
    2020-04-13
    有用
    回复
登录 后发表内容
问题标签