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

我试图弄清楚如何获取给定的

img

元素，并使用Javascript将该

img

拆分为四个大小相等的块。也就是说，原始图像的左上象限将成为其自己的

img

元素，与其他三个象限相同。然而，我不知道如何才能做到这一点。是否有人能提供一个起点或解释如何/如果可以做到这一点？它必须是野蛮的像素操作吗？

您可以在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>

var imgSrc=$（“#img img”）.attr（“src”）；
对于（var i=0；i我认为最好的解决方案是使用画布。唯一的警告是原始图像必须在本地提供或通过CORS提供。完成此解决方案的步骤是：

选择图像，或通过javascript设置图像源（如果未显示）
加载图像时，创建4个画布，每个画布的大小为图像的1/4
使用drawImage，将图像的每四分之一绘制到每个小画布上
获取每个画布的每个图像源（canvas.toDataUrl）
创建新的图像元素并将其源设置为每个新源
整个解决方案可以在链接的codepen示例中查看

你对生成的图像做了什么？你只是在显示它们吗？目前，是的。我稍后会处理它们。我相信目标是通过将原始图像裁剪成四分之一来创建新图像。当然，我的解决方案可以重构，这只是一个如何使用画布将图像裁剪成四个较小图像的示例。为什么只有一个象限显示了吗？我理解代码，但只有右上角显示。它们似乎都是附加的。我没有这样做；这是我的javascript，它显示图像，当我在Chrome中打开代码笔时，它工作得很好，而不是Safari。太好了。谢谢你的帮助。但是为什么它不在Safari上工作呢还有其他浏览器吗？不支持画布还是什么？