<template>
     <div>
     <canvas style="height: 500rpx;width: 500rpx;" canvas-id="myCanvas"></canvas>
     <image :src="imagePath" style="width: 200rpx;height: 200rpx;"/>
     </div>

</template>

<script>
import testShare from "@/components/test-share"
    
export default {
  data(){
      return {
           imagePath:""
      }
  },
  methods:{
       draw(){
               let promise1 = new Promise((resolve, reject) =>{
                     wx.getImageInfo({
                            src:"https://avatar.csdn.net/F/3/9/3_ruffaim.jpg",
                            success: function(res) {
                                console.log("-----------------")
                            resolve(res);
                            },
                            fail:function(res){
                                console.log("fail-----------------")
                                reject(res);
                            }
                            
                     });
                });
                promise1.then(res =>{
                    console.log(res.path);
                    var ctx = wx.createCanvasContext("myCanvas");
                    ctx.drawImage(res.path,0,0,100,100);
                    ctx.draw(false,() =>{
                       wx.canvasToTempFilePath({
                    x: 0,
                    y: 0,
                    width: 200,
                    height:200,
                    canvasId: "myCanvas",
                    success: (res)=> {
                        this.imagePath = res.tempFilePath;
                    }, 
                })
             });

                }).catch(err =>{
                    
                })
                
                
          }
  },
  onShow(){
      this.draw()
  }

}
</script>