用JavaScript獲取部分圖像

是否可以通過JavaScript在img標記（帶有像素）顯示圖像的任何部分？我會準備一個大的圖像（例如32x320像素）和定義的起始位置（X，Y，例如0.32）和寬度/高度（例如32,32），並希望腳本顯示第二個（例如， 32x32像素）主圖像的一部分。用JavaScript獲取部分圖像

來源

2010-04-04 Alper

[我怎樣才能在HTML/CSS中顯示圖像的一部分？]（https://stackoverflow.com/questions/57725/how-can-i-display-just-a-portion- html-css） – vaxquis 2017-07-07 20:06:35

雖然引用的問題是關於html/css，但這是針對JavaScript的。 – Alper 2017-07-07 20:14:20

您是否知道，因爲您的問題隱含在JavaScript DOM中，並且DOM本身只是HTML/CSS的編程後端，您的問題*是關於HTML/CSS本身的？這裏接受的答案指出了CSS的原因。 *不考慮HTML/CSS就不能*執行JS DOM *甚至在其他答案中提到的HTML5 canvas元素也只是一個HTML5文檔元素。 – vaxquis 2017-07-07 20:40:35

您可以使用CSS屬性爲此並通過JS更改它們。將圖像設置爲具有所需大小的元素的背景，並使用背景位置調整其位置，以使其正確部分可見。有人稱之爲CSS sprites。

來源

2010-04-04 14:41:11

+1你甚至不需要使用DIV。我使用透明的PNG並設置了它的背景圖像，這同樣適用於這個目的，但是如果我想不必處理浮動圖像等，我可以選擇使用內聯工件。 – Robusto 2010-04-04 14:59:50

是的，自然這適用於任何元素。使用img元素聽起來有點髒，但我可能會使用display：inline-block;如果我想讓元素與文本一起流動。 – 2010-04-04 15:08:09

爲了給您提供多種選擇，您可以隨時使用HTML5畫布並根據需要重新繪製圖像。你可以在這裏找到一個很好的教程：https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Canvas_tutorial/Using_images 儘管如此，IE瀏覽器還是不支持canvas，但CSS sprite方法會更好。

來源

2010-04-04 14:48:44

您甚至可以將您繪製的圖像保存爲數據網址http://www.html5canvastutorials.com/advanced/html5-canvas-save-drawing-as-an-image/ – 2014-07-23 03:24:54

用JavaScript獲取部分圖像

回答

相關問題