JavaScript的客戶端 - 從網頁上的現有圖像創建新的圖像

Question

有沒有辦法在Web瀏覽器中使用JavaScript將圖像切割成瓷磚？

我想讓用戶從網頁上的圖庫中選取一張圖片，然後在4或6張新圖片中剪切該圖片，然後將這些圖塊放入一張表格中，並讓用戶爲其中的每一張添加一些描述。

正如我現在看到的，我可以在用戶選擇圖片和圖塊數後從服務器重新加載圖塊，但如果可能的話，我想跳過重新加載。

編輯：
關於瀏覽器的水平支持KP的評論，我想有解決方案，不需要對HTML5的支持，如果這是可能的。

Answer 1

如果你正在處理現代瀏覽器，你可以使用畫布來完成。請參閱this tutorial並查看「切片」部分。基本上，你可以使用

drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight)

就砍原始圖像，你喜歡它（s基於參數）的任何方式，並把該部分的任何地方，你想在畫布（在d依據的論點）。如果您希望保存一個分片，則可以使用toDataUrl方法獲取分片的base64。 See this。

請記住，圖像的src url需要在JavaScript的加載域，否則你會污染畫布。您可以通過讓服務器返回圖像的base64表示來解決這個問題。

最後，大圖像上的toDataUrl可能會「慢」，因此請準備好。

編輯 - 因爲你不能依賴畫布，所以你需要使用SVG，這是更老的瀏覽器支持。有像Raphael.js這樣的圖書館來幫助你。