Question

我想从现有图像中获取不规则形状的部分，并使用HTML5画布将其渲染为Javascript中的新图像。因此，只会复制多边形边界内的数据。我提出的方法包括：

在新画布中绘制多边形。
使用clip
使用getImageData（矩形）
使用putImageData

它不起作用，整个矩形（例如来自边界外的源的东西）仍然出现。 This question解释了原因： “该规范称putImageData不会受到裁剪区域的影响。”荡！

我还尝试绘制形状，设置context.globalCompositeOperation = "source-in"，然后使用putImageData。相同的结果：没有应用蒙版。我怀疑有类似的原因。

有关如何实现这一目标的任何建议？这是我正在进行的工作的基本代码，以防我不知道自己要做什么。（不要太努力地调试它，它会从使用很多不在这里的函数的代码中清理/提取，只是试图显示逻辑）。

 // coords is the polygon data for the area I want
   context = $('canvas')[0].getContext("2d");
   context.save();
   context.beginPath();
   context.moveTo(coords[0], coords[1]);
   for (i = 2; i < coords.length; i += 2) {
     context.lineTo(coords[i], coords[i + 1]);
   }
   //context.closePath();
   context.clip();

   $img = $('#main_image');
   copy_canvas = new_canvas($img); // just creates a new canvas matching dimensions of image
   copy_ctx = copy.getContext("2d");

   tempImage = new Image();
   tempImage.src = $img.attr("src");
   copy_ctx.drawImage(tempImage,0,0,tempImage.width,tempImage.height);

  // returns array x,y,x,y with t/l and b/r corners for a polygon
  corners = get_corners(coords)
  var data = copy_ctx.getImageData(corners[0],corners[1],corners[2],corners[3]);
  //context.globalCompositeOperation = "source-in";
  context.putImageData(data,0,0);
  context.restore();

Answer 1

不要使用putImageData，

使用document.createElement在内存画布中创建一个额外的来创建蒙版并将其应用于drawImage()和globalCompositeOperation函数（取决于您需要的顺序）选择正确的模式;

我something similar here code is here（注意CasparKleijne.Canvas.GFX.Composite函数）

使用HTML5画布掩盖putImageData？

1 个答案: