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);
})