裁剪网页上的图像在一个非线性/矩形的方式，所以任何形式的多边形

Question

很想听听别人的想法。

我希望有这样的场景…

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

所以flash是我首先想到的东西，但我想避免它，如果poss(并保持iPad友好)，所以我想剩下html5/css3/JavaScript，可能最重要的是html画布。

我更愿意避免像java之类的东西，并保持简单的web技术?

我快速搜索了一下，但没有任何东西跳出来。

建议欢迎! !

Answer 1

你可以用canvas来做，特别是clipping path:

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.files[0]和FileReader API从<input>获取图像，然后使用XHR2发送，或者将其上传到服务器后获取。