我正在尝试拍摄图像并将其切成 20 个切片,并且这些切片也出现在它们自己的 div 中,如下所示:
<div id="example" class="container">
<div class="item slice1"></div>
<div class="item slice2"></div>
<div class="item slice3"></div>
...
</div>
我希望图像在 CSS 中显示为背景,尽管我也可以将这项工作添加到 . 我发现将一个图像切成多个切片的一个简单示例如下:
function drawOnCanvas() {
var canvas = document.getElementById("example");
if (canvas.getContext){
var canvas_context = canvas.getContext("2d");
var img = document.getElementById("image");
canvas_context.drawImage(img, 0, 0, 180, 300, 20, 20, 150, 300);
canvas_context.drawImage(img, 200, 0, 180, 300, 200, 20, 150, 300);
canvas_context.drawImage(img, 350, 0, 180, 300, 380, 20, 150, 300);
}
}
关于如何分离画布中包含的切片以将它们保存为 slice1.jpg、slice2.jpg ... 或类似内容的任何想法?真的停留在这个