Question

html5 canvas标签具有与之关联的javascript getImageData（）函数，其返回值是包含所包含像素的矩形。

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

有人知道从html5画布中获取三角形图像的内容吗？

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

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

Answer 2

你不能。

根据您要做的事情而定，只需获取所有点的并集的最小矩形，并仅使用您关注的像素的imageData。

换句话说，如果您的三角形的点位于（50,50），（100,100）和（0,100），则从（0,50）得到一个100宽，高度为50的矩形。使用你关心的像素的图像数据。

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

Answer 3

我几乎从不使用任何形式的图像处理，所以不能提出具体细节，但你可能只是将不需要的部分涂成透明的，然后复制矩形。

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

Answer 4

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

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

4 个答案: