Fabric JS逐像素操作

Question

我有矩形透明孔的叠加图像。 Beneath是可扩展和可拖动的图像。如何只剪切图像的可见部分？

如何确定透明矩形的大小和位置？是否可以仅在叠加图像上进行逐像素Alpha通道搜索？

还有其他想法吗？

编辑：

另一个引用问题的解决方案很有用，虽然它仅适用于整个画布，而不适用于背景，叠加或添加的图像或形状等单个项目。是否可以读取各个织物元素上的像素值？

我使用叠加图像作为外部png文件。

Answer 1

FabricJS API不包含获取图像像素值的方法。

您必须将叠加图像绘制到html5画布上，然后使用getImageData从该画布中获取像素数据。

getImageData().data包含红色，绿色，蓝色和＆amp;画布上每个像素的alpha信息。

您可以测试每个像素的alpha值并确定最小值和最小值。透明矩形的最大边界。

以下是示例代码和演示：

var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
var cw=canvas.width;
var ch=canvas.height;


var img=new Image();
img.crossOrigin='anonymous';
img.onload=start;
img.src="https://dl.dropboxusercontent.com/u/139992952/multple/jellybeans.jpg";
function start(){
  cw=canvas.width=img.width;
  ch=canvas.height=img.height
  ctx.drawImage(img,0,0);
  // clear a test rectangle
  ctx.clearRect(100,100,100,75);
  // get clear rect bounds
  var bounds=findCutoutBounds();
  // test: stroke the bounds
  ctx.lineWidth=2;
  ctx.strokeStyle='red';
  ctx.strokeRect(bounds.x,bounds.y,bounds.width,bounds.height);
}

// Get the imageData of that canvas
function findCutoutBounds(){
  var minX=1000000;
  var minY=1000000;
  var maxX=-1;
  var maxY=-1;
  var data=ctx.getImageData(0,0,canvas.width,canvas.height).data;
  for(var y=0;y<ch;y++){
    for(var x=0;x<cw;x++){
      var n=(y*cw+x)*4;
      if(data[n+3]<5){
        if(y<minY){minY=y;}
        if(y>maxY){maxY=y;}
        if(x<minX){minX=x;}
        if(x>maxX){maxX=x;}
      }
    }}
  return({x:minX,y:minY,width:maxX-minX,height:maxY-minY});
}

body{ background-color: ivory; }
#canvas{border:1px solid red;}

<h4>The bounding box of the transparent rectangle is stroked in red</h4>
<canvas id="canvas" width=300 height=300></canvas>