javascript - 以非线性/矩形方式裁剪网页上的图像，以便任何形式的多边形

Question

很想听听其他人的想法。

我想要这样的场景...

1. 用户上传图片(用我选择的脚本语言 php 轻松完成)
2. 然后他们可以在他们的浏览器中裁剪图像，而不仅仅是一个子选择的矩形以便能够跟踪，例如一个人，然后“剪切”或“隔离”它们以便将它们添加到不同的例如背景。

所以 flash 是第一个想到的东西，但如果可能的话，我想避免它(并保持 iPad 友好)所以我想剩下的是 html5/css3/JavaScript，可能最重要的是 html canvas。

我宁愿避免任何类似 java 等的东西，而将其保留为简单的网络技术？

我快速谷歌了一下，但似乎什么也跳不过去。

欢迎提出建议!!

Answer 1

你可以用 Canvas 来做，特别是剪切路径:

var img = new Image();
var context = canvas.getContext('2d');

img.onload = function(){
  context.beginPath();
  context.moveTo(10,10);
  context.lineTo(300,200);
  context.lineTo(100,150);
  context.clip();
  context.drawImage(img, 0,0)
}

img.src = 'example.png';

当然，您需要编写一些让用户设置点的 UI。您可以直接从 <input> 获取图像通过input.files[0]和 FileReader API然后用XHR2发送，或者上传到服务器后获取。