canvas根据图片提取轮廓

用标签画一个不规则图形（如动物）

1，原理思路：将图片渲染到画布，然后通过getImageData拿到像素点的rgba，根据rgba找到对应坐标。
2,注意点：在调用getImageData时图片地址须在同一服务地址下，否则报跨域错误。(我是直接在vue脚手架上写的demo)

图片原型

标签所画

>>>模板标签
    

      
    
    


>>>css
#boxs{
  position: relative;
}
>>>js(!!!我这是在vue脚手架写的demo)
mounted(){
    var canvas=document.getElementById("canvas");
    let boxs=document.getElementById("boxs");
    var ctx=canvas.getContext("2d");
    var img=new Image();
    img.src=require('./black.png');
    img.onload=function(){
      canvas.width=img.width;
      canvas.height=img.height;
      ctx.drawImage(img,0,0)
      var imageData=ctx.getImageData(0,0,img.width,img.height).data;
      ctx.fillStyle="#ffffff";
      ctx.fillRect(0,0,img.width,img.height);
      var gap=12;
      for(let i=0;i