uniapp微信小程序canvas绘图插入网络图片不显示

 

网络图片缓存

  在uni中wx可以用uni代替 无区别;

  先把要插入的网络图片缓存(getImageInfo);

let context = uni.createCanvasContext('firstCanvas');  //canvas-id='firstCanvas'
uni.getImageInfo({
      src:https://xxxxxxxx,
      success:res=>{
           console.log(`缓存地址:${res.path}`);     
       context.drawImage(res.path,0,0,100,100);   //插入图片
    },
      fail:res=>{
           console.log(`缓存失败:${res.errMsg}`);     
    } 
})

getImageInfo会出现的问题

  downloadFile域名没有配置

    

没有域名也可以插

  把不效验合法域名开始就好。

  开启之后手机打开微信小程序调试就可以正差看了。

  

生成图片

  安卓会出现生成的图片,乱的问题,使用setTimeout来延时触发解决。

let context = uni.createCanvasContext('firstCanvas');   // canvas-id="firstCanvas"
context.draw(false,function(e){
   setTimeout(()=>{
    uni.canvasToTempFilePath({
     canvasId:'firstCanvas',
     success:res=>{
       console.log(`生成的图片:${res.tempFilePath}`);
     }
    })
  },1000);
})

  

  

有问题联系QQ1291481728或在下方评论,会在第一时刻处理。
原文地址:https://www.cnblogs.com/1748sb/p/12955714.html