Javascript 如何使用getImageData（）获取非矩形形状？

html5画布标记具有与之关联的javascript getImageData（）函数，其返回值是包含封闭像素的矩形

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

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

你不知道

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

imageData

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

---

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

我几乎从来没有用过任何形式的图像处理，所以不能建议具体细节，但你可能只是把不需要的部分涂成透明的，然后复制矩形

---

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

如果是为了提高效率，那么否使用

getImageData（）

无法获得非矩形形状。但是，如果您想要功能，那么您可以这样做（）：

---

你得到的是原版，然后是剪辑版。每次加载图像时都可以执行此操作。或者，您也可以通过创建第二个画布来创建图像，但要使用剪辑进行绘制。基本上，这会创建一个缓存版本的图像，它仍然是一个矩形，但剪辑会将剪辑之外的所有内容呈现为透明的（如果您愿意，我也可以提供一个示例）。

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

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";