使用Javascript複製和裁剪圖像

我正嘗試在Javascript/Canvas中創建一個由幾個動畫圖形組成的小型2D遊戲。我想減少HTTP請求的數量，所以我將每幀動畫（32像素×32像素）組合成一個圖像（比如192像素×128像素）。有沒有什麼辦法可以將客戶端的這些圖像複製並剪切成幾個較小的圖像？這將大大簡化我的渲染代碼，並有助於減少網絡延遲造成的加載時間。使用Javascript複製和裁剪圖像

來源

2010-11-17 Nick Meharry

看看Pixastic，特別是http://www.pixastic.com/lib/docs/actions/crop。

來源

2010-11-17 00:17:22

我以前沒有見過，我會研究它。謝謝。 – 2010-11-17 00:26:43

HTML5 Canvas API提供了一個名爲drawImage的方法，它允許您裁剪輸入圖像。

context.drawImage(image, sx, sy, sw, sh, dx, dy, dw, dh)

alt text

欲瞭解更多信息，請參閱規範（該圖像是直接從規格拍攝）：

http://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html#images

來源

2010-11-17 00:19:25 mike

這實際上是我現在正在做的。我只是想知道在繪製圖像之前是否有辦法裁剪圖像以簡化渲染代碼。 – 2010-11-17 00:25:55

如果你唯一的擔心是簡單的代碼，你可以將圖像數據封裝到一個可重用的對象，如下所示：https://gist.github.com/702799 – mike 2010-11-17 00:36:08

我仍在努力，但給你一個想法我在哪裏，這裏是源：http://bitbucket.org/bluejeansummer/rpgsite/src/tip/media/js/rpg.js – 2010-11-17 01:00:04

如果你不想使用帆布或第三方庫中，您可以將圖像添加到剪裁版本大小的div（帶有「overflow：hidden」），併爲圖像提供負左上邊距。
每一個都會帶有整個圖像，但只會顯示其中的一部分，這可能（或不會）影響性能。我相信你可能不得不給予div元素一個位置：相對以及讓IE開心。

或者，您可以將圖像指定爲div的背景，並指定backgroundPosition。我似乎記得這不適合我曾經做過的事情，不知道爲什麼。（我認爲它與不透明度有關）

來源

2010-11-17 00:24:10 rob

鑑於這個問題是在創建JavaScript /帆布遊戲的環境中提出的，我不確定這是否完全相關？ – 2010-11-17 00:40:54

夠公平的，我想我認爲畫布被提及是因爲他認爲這是必要的。但是，是的，畫布很容易複製圖像的一部分，我想知道爲什麼需要pixastic庫.... – rob 2010-11-17 00:44:10

只需將圖像加載到樣式屬性顯示設置爲隱藏的img標記中即可。然後在離屏畫布上裁剪圖像，然後根據需要將該畫面畫布寫入主畫布。

來源

2012-01-25 10:50:24

使用Javascript複製和裁剪圖像

回答

相關問題