Question

我正在尝试弄清楚如何使用给定的img元素，并使用Javascript将img拆分为四个相等大小的图块。也就是说，原始图像的左上象限将成为其自己的img元素，与其他三个象限相同。但是，我对如何做到这一点感到茫然。有人可以提供一个起点或解释如何/如果这样做？它必须是粗暴的像素操作吗？

Answer 1

我认为这里最好的解决方案是使用画布。唯一需要注意的是原始图像必须在本地提供或通过CORS提供。完成此解决方案的步骤是：

选择图像，或通过javascript设置图像的来源（如果没有显示）
图像上载，创建4幅画布，每幅画面尺寸为图像的1/4
使用drawImage，将每个四分之一的图像绘制到每个小画布
获取每个画布的每个图像源（canvas.toDataUrl）
创建新的图像元素并将其源设置为每个新来源

可以在链接的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>

使用Javascript将img元素拆分为四个大小相等的较小img元素

2 个答案: