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