HTML5 使用画布将图像分解为图块

Question

我有一个大图像，我想使用 html5 画布将其分解为 10x10 平铺图像。我可以轻松地将大图像绘制到画布上，然后使用 getImageData 获取特定区域的像素数据。

有没有一种简单的方法可以将该图像数据（这是一个像素数组）放入图像 html 元素中，还是我必须创建一个新画布，将 ImageData 放入像素数组，然后调用 toDataURL？

Answer 1

为什么要在画布上经历所有这些麻烦？使用图像作为背景，并通过定位显示您想要的部分。

HTML

<div class="myImage section1"></div>
<div class="myImage section2"></div>
<div class="myImage section3"></div>
<div class="myImage section4"></div>

CSS

div.myImage {
    width: 100px;
    height: 100px;
    background-image:url('myImage.png');
    background-position: 0 0;
}

.section2 {
    background-position: 100px 0;
}

.section3 {
    background-position: 0 100px;
}

.section4 {
    background-position: 100px 100px;
}