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

Question

很想听听别人的想法。

我想有这个场景...

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

所以 flash 是首先想到的事情，但我想避免这种情况（如果 poss （并保持 iPad 友好），所以我想剩下 html5/css3/JavaScript 和可能最重要的 html canvas。

我宁愿避免使用 java 等任何东西并将其保留为简单的 Web 技术？

我有一个快速的谷歌，但似乎没有什么跳跃。

欢迎提出建议！！

Answer 1

您可以使用画布，特别是剪切路径：

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>viainput.files[0]和FileReaderAPI 获取图像，然后使用 XHR2 发送，也可以在上传到服务器后获取。