Question

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

有没有一种简单的方法可以将图像数据（像素数组）放在图像html元素中，还是我必须创建一个新的画布，putImageData像素数组然后调用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;
}

HTML5使用画布将图像分解为切片

1 个答案: