是否有關於如何剪切或剪切大圖像的文檔/教程，以便用戶只能看到該圖像的一小部分？假設源圖像是10幀動畫，堆疊端到端，因此非常寬。我能用Javascript做什麼，一次只顯示一個任意框架的動畫？使用Javascript以編程方式剪切/剪切圖像
我已經看過這個「CSS Spriting」技術，但我不認爲我可以在這裏使用它。源圖像是從服務器動態生成的;我不知道每個幀的總長度或大小，直到它從服務器返回。我希望我可以這樣做：只讀取文檔的圖像對象的
var image = getElementByID('some-id');
image.src = pathToReallyLongImage;
// Any way to do this?!
image.width = cellWidth;
image.offset = cellWidth * imageNumber;
這可以通過將您的圖像封閉在「視口」div中完成。在div上設置寬度和高度（根據您的需要），然後在其上設置position: relative和overflow: hidden。將圖像絕對放置在其中並更改位置以更改顯示哪些部分。
要顯示從（10,20）的圖像的30X40部分：
<style type="text/css">
div.viewport {
overflow: hidden;
position: relative;
}
img.clipped {
display: block;
position: absolute;
}
</style>
<script type="text/javascript">
function setViewport(img, x, y, width, height) {
img.style.left = "-" + x + "px";
img.style.top = "-" + y + "px";
if (width !== undefined) {
img.parentNode.style.width = width + "px";
img.parentNode.style.height = height + "px";
}
}
setViewport(document.getElementsByTagName("img")[0], 10, 20, 30, 40);
</script>
<div class="viewport">
<img class="clipped" src="/images/clipped.png" alt="Clipped image"/>
</div>
常見的CSS屬性與類相關聯，這樣你可以有多個視/網頁上截取圖像。可隨時調用setViewport(…)函數來更改顯示圖像的哪一部分。
寬度/高度屬性。但是，如果你可以改變它們，你只會擠壓框架，而不是像你想要的那樣剪掉框架。您想要的圖像處理類型不能用客戶端JavaScript來完成。我建議在服務器上剪切圖像，或者在圖像上疊加一個div以隱藏不希望顯示的部分。
是的，如果你要裁剪你需要把它放在另一個元素中（DIV是最常見的）的圖像，然後設置將此元素溢出爲隱藏狀態，並將其中的圖像移動到其中，同時考慮將圖像用作背景。 – 2009-01-26 21:20:28
我們有一個實現只提供單個圖像的實現，並且有一些AJAX可以動態獲取它們。但是，我們希望加載一個大的圖像並將其剪切在客戶端將會產生更好的用戶體驗...... – 2009-01-26 21:25:21
spriting的功能基本上是將絕對定位的DIV放置在另一個溢出的DIV中：隱藏。您也可以做同樣的事情，您只需根據較大圖像的每個幀的大小調整外部DIV的大小。你可以用代碼輕鬆做到這一點。
您可以只設置內部DIV的風格：
left: (your x-position = 0 or a negative integer * frame width)px
大多數JavaScript框架使這很容易。
CSS還定義了一個裁剪樣式。查看CSS規範中的剪輯屬性。
唉，JavaScript根本無法提取您需要執行此類操作所需的圖像屬性。但是，可能會有HTML < canvas>元素與少量服務器端腳本相結合的形式。
PHP代碼去提取真正的大圖像的寬度和高度：
<?php
$large_image = 'path/to/large_image';
$full_w = imagesx($large_image);
$full_h = imagesy($large_image);
?>
從這裏，你會然後將圖像加載到< canvas>元素，其中一個例子是記錄here。現在，我的理論是，你可能能夠從一個< canvas>元素中提取像素數據;假設您可以，您只需確保在大圖像的幀之間具有某種形式的明確分隔符，然後在畫布內搜索它。假設您從圖像的左側找到110個像素的分隔符;那麼你就會知道每個「幀」的寬度是110像素，而且你已經將整個寬度存儲在一個PHP變量中，所以解讀你使用的圖像會變得輕而易舉。
這種方法唯一推測的方面是JavaScript是否能夠從加載到一個< canvas>元素的圖像中的指定位置提取顏色數據;如果這是可能的，那麼你試圖完成的是完全可行的。
我想你想要爲你的圖像縮略圖。您可以使用從原型庫以這種方式創建ImageThumbnail.js：
<script type="text/javascript" src="prototype.js"></script>
<script type="text/javascript" src="ImageThumbnail.js"></script>
<input type="file" id="photo">
<img src="empty.gif" id="thumbnail" width="80" height="0">
<script type="text/javascript">
<!--
new Image.Thumbnail('thumbnail', 'photo');
//-->
</script>
在回答：
唉，JavaScript的根本不能夠提取的屬性你需要這樣做的圖像。但是，可能會有HTML元素的形式與一些服務器端腳本相結合的救贖。 ...
< ? (open php)
$large_image = 'path/to/large_image';
$full_w = imagesx($large_image);
$full_h = imagesy($large_image);
(close php) ? >
這可以在Javascript中完成，只是谷歌了一下：
var newimage = new Image();
newimage.src = document.getElementById('background').src;
var height = newimage.height;
var width = newimage.width;
這產生從現有的一個新的圖像和Java腳本的原始捕獲這樣原始圖像的高度和寬度屬性（不是以id'ed作爲背景的）
回答：
文檔的圖像對象的寬度/高度屬性是隻讀的。但是，如果你可以改變它們，你只會擠壓框架，而不是像你想要的那樣剪掉框架。您想要的圖像處理類型不能用客戶端JavaScript來完成。我建議在服務器上剪切圖像，或者在圖像上疊加一個div以隱藏不希望顯示的部分。
...
var newimage = new Image();
newimage.src = document.getElementById('background').src;
var height = newimage.height;
var width = newimage.width;
newimage.style.height = '200px';
newimage.style.width = '200px';
newimage.height = '200px';
newimage.width = '200px';
，如果想：
newimage.setAttribute('height','200px');
的一倍newimage.style.height並且需要在某些情況下，爲了確保newimage.height一個IE會及時瞭解圖像的大小調整（您將立即渲染該內容，並且內部IE處理速度太慢）
感謝上述腳本我修改並實施了http://morethanvoice.net/m1/reader13.php（鼠標右鍵菜單... mouseover zoom lent），即使在IE中也是正確的，但是你會注意到鼠標移動圖像處理對於舊式IE來說太快了，只能渲染一次圖像的位置。無論如何，任何好主意都是值得歡迎的。
感謝大家的關注，希望上面的代碼可以幫助別人......
克勞迪奧·Klemp http://morethanvoice.net/m1/reader13.php
嘗試使用haxcv庫haxcv JS通過簡單的功能
去https://docs.haxcv.org/Methods/cutImage閱讀更多關於他的圖書館
var Pixels = _("img").cutImage (x , y , width , height );
_（ 「IMG」）。SRC（ Pixels.src）;
//返回剪切圖像 但儘量包括圖書館第一
非常酷。幾乎立即工作。只有你的代碼的問題是，當它應該使用'y'時，img.style.top使用'x'參數，左邊是同樣的東西。除此之外，工作就像一個魅力！ – 2009-01-26 21:35:40