使用Javascript將一個img元素拆分爲四個相同大小的較小img元素

Question

我想弄清楚如何使用給定的img元素，並使用Javascript將img拆分爲四個相同大小的圖塊。也就是說，原始圖像的左上象限將變成其自己的img元素，如同其他三個象限一樣。然而，我不知道如何做到這一點。有人可以提供一個起點或解釋如何/如果這可以完成？它會不會是粗暴的像素操作？

Answer 1

我相信在這裏最好的解決辦法是使用的畫布。唯一需要注意的是原始圖像必須在本地提供或通過CORS提供。完成此解決方案的步驟將是：

1. 選擇圖像，或通過javascript設置圖像的源（如果未顯示）
2. 的Onload圖像，創建4個畫布每1/4圖像
3. 使用的drawImage的大小，圖像的每個季度畫上每個小帆布
4. 獲取每個畫布的每個圖像源（canvas.toDataUrl）
5. 創建新的圖像元素並設置其來源各新來源

可以在鏈接的codepen示例上查看整個解決方案。

codepen example

Answer 2

你可以做這樣的事情在jQuery的：

<div id="img"> 
    <img src="myimage.png" alt="" style="width: 100px; height: 100px;" /> 
</div> 

<script> 
var imgSrc = $("#img img").attr("src"); 

for(var i=0; i<4; i++) 
    $("#img").append($("<div></div>").attr("src", imgSrc).css({ width: (imgWidth/4), height: (imgHeight/4) })); 
</script>