收藏
回答

使用canvas 2d画图时,网络图片本地下载后不显示?

将网络图片使用APIgetImageInfo / downloadFile下载下来,在画图时还是报错不显示

这是调用代码
/**生成分享海报 */
  ajaxcanvasImg:function(img){
    let that = this;
    let url = img ? img :'图片的网络路径';
    wx.getImageInfo({
      src: url, //仅为示例,并非真实的资源
      success(res) {
        console.log(res)
        $.canvasImg1('#canvas_poster', res.path, function (urlImg) {
          console.log(urlImg)
        })        
      }
    })
  },
这是封装的函数
/**画布分享链接的海报1 */
  canvasImg1: function (template,img,callback){
    let that = this;
    const query = wx.createSelectorQuery()
    query.select(template)
      .fields({
        node: true,
        size: true
      })
      .exec((res) => {
        const canvas = res[0].node
        const ctx = canvas.getContext('2d')
        const dpr = wx.getSystemInfoSync().pixelRatio
        ctx.scale(dpr, dpr)
        canvas.width = 442 * that.globalData.rpx
        canvas.height = 336 * that.globalData.rpx
        const image = canvas.createImage(); //创建image  
        console.log(image) 
        image.src = img; //指定路径为getImageInfo的文件
        image.onload = () => {
          ctx.drawImage(image, 0, 0, 442 * that.globalData.rpx, 264 * that.globalData.rpx) //图片加载完成时draw
        }
        const image2 = canvas.createImage(); //创建image
        image2.src = '/images/icon/btn.png'; //指定路径为getImageInfo的文件
        image2.onload = () => {
          ctx.drawImage(image2, 14 * that.globalData.rpx, (264 + 8) * that.globalData.rpx, 396 * that.globalData.rpx, 56 * that.globalData.rpx) //图片加载完成时draw
        }
        setTimeout(function () {
          wx.canvasToTempFilePath({
            canvas: canvas,
            success(res) {
              callback(res.tempFilePath)
            }
          })
        }, 200);
      })
  },
回答关注问题邀请回答
收藏

1 个回答

登录 后发表内容
问题标签