如何使用 getImageData() 获得非矩形形状？答案

【问题标题】：how to get a non-rectangular shape using getImageData()?如何使用 getImageData() 获得非矩形形状？
【发布时间】：2011-12-22 21:08:45
【问题描述】：

html5 canvas 标签有与之关联的 javascript getImageData() 函数，它的返回值是一个包含封闭像素的矩形。

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

有人知道如何从 html5 画布中获取三角形图像吗？

【问题讨论】：

标签： javascript html canvas html5-canvas

【解决方案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";

你得到的是原版，然后是剪辑版。每次加载图像时都可以这样做。或者，您可以创建图像，方法是创建第二个画布，向其绘制但使用剪辑。本质上，这会创建图像的缓存版本，它仍然是一个矩形，但剪辑会将剪辑之外的所有内容呈现为透明（~~如果您愿意，我也可以提供一个示例~~ see here）。

【讨论】：

【解决方案2】：

你不能。

根据您要执行的操作，只需获取作为所有点并集的最小矩形，并仅使用您关心的像素的imageData。

换句话说，如果你的三角形在 (50,50)、(100, 100) 和 (0,100) 有点，那么从 (0,50) 得到一个宽 100、高 50 的矩形。那么只有使用您关心的像素的图像数据。

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

【讨论】：

【解决方案3】：

我几乎从不使用任何形式的图像处理，因此无法提出具体建议，但您可能只需将不需要的部分涂成透明，然后复制矩形。

可能搜索路径、剪切区域、填充

【讨论】：

【解决方案4】：

请注意，所有图像都是矩形的。 getImageData 返回位图数据，因此它将是一个 2x2 字节数组。您可以做的是使用您想要的点绘制路径并使用它来剪辑画布内容。它就像一个以透明像素为背景的PNG图像。

【讨论】：