以非線性/矩形的方式在網頁上裁剪圖像，因此任何形式的多邊形

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發送它，或者在將其上傳到服務器後獲取。