canvas根据图片提取轮廓

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

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

图片原型

标签所画

>>>模板标签
    <div>
      <canvas id="canvas"></canvas>
    </div>
    <div id="boxs"></div>

>>>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<img.height;i+=gap){
        for(let j=0;j<img.width;j+=gap){
          let p=(img.width*i+j)*4;
          let R=imageData[p],G=imageData[p+1],B=imageData[p+2]
          if(R+G+B==0){
            let node=document.createElement("div");
            node.style.left=j+"px";
            node.style.top=i+"px";
            node.style.position="absolute";
            node.style.borderRadius="50%";
            node.style.background="orange";
            node.style.width=10+"px";
            node.style.height=10+"px"
            boxs.appendChild(node)
          }
        }
      }
    }
  }