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

Question

好奇听到别人的想法。

我想有这种情况...

1. 用户上传的图像（在PHP中很容易做到我所选择的脚本语言）
2. 然后，他们可以裁剪图像在他们的浏览器，但不只是一个子选定的矩形可以跟踪，例如一个人，然后“剪切”或“隔离”它们，以便它们可以被添加到不同的背景中。

因此，Flash是第一个想到的，但我想避免，如果poss（并保持iPad的友好），所以我想这留下html5/css3/JavaScript和可能最重要的HTML画布。

我宁愿避免像java等任何东西，并保持这个简单的网络技术？

我有一个快速谷歌，但似乎没有跳。

建议欢迎！

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

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