如何使用getImageData()获取非矩形形状？

Question

HTML5 Canvas标签与JavaScript的getImageData()函数相关联，其返回值是一个包含封闭像素的矩形。

但是我需要从原始画布中获取一个三角形的图像，由我选择的点包围。

有人知道如何从HTML5 Canvas获取三角形形状的图像吗？

- Draconar

Answer 1

如果是为了效率考虑，那么使用getImageData()无法获得非矩形形状。但是，如果您需要该功能，则可以像这样进行剪裁（clip）（JS Lint Example）。

var img1 = new Image();
img1.onload = function(){
    var w = img1.width
    var h = img1.height

    ctx.drawImage(img1,0,0);

    // Create a circular clipping path 
    ctx.translate(w / 2,  1.5 * h);       
    ctx.beginPath();
    ctx.arc(0,0,100,0,Math.PI*2,true);
    ctx.clip();
    ctx.drawImage(img1,-w / 2,-150);
}

img1.src = "foobar.jpg";

你得到的是原始图像，然后是裁剪版本。每次加载图像时都可以这样做。或者，你可以通过创建第二个画布并绘制裁剪内容来创建图像。本质上，这将创建您图像的缓存版本，它仍然是一个矩形，但裁剪会使裁剪外的所有内容变为透明（如果需要，我也可以提供示例 请看这里）。

- puk

Answer 2

不行。

根据您要做什么，相反地，只需获取所有点的并集的最小矩形，并仅使用您关心的像素的imageData。

换句话说，如果您的三角形在（50,50），（100,100）和（0,100）处有点，则从（0,50）获取一个宽度为100，高度为50的矩形。然后只使用您关心的像素的imagedata。

如果您真的想要一个三角形形状的图像，那么这些不存在。

- Simon Sarris

Answer 3

我基本上从不涉及任何形式的图像处理，因此无法提供具体建议，但您可能只需将不需要的部分涂成透明色，然后复制矩形。

也许可以搜索路径、剪辑区域、填充等相关内容。

- goat

Answer 4

请注意，所有图像都是矩形的。getImageData返回位图数据，因此它将是一个字节的2x2数组。您可以使用要素绘制路径并使用其剪切画布内容。这将类似于具有透明像素背景的PNG图像。

- Diode