如何将图像分割成多个部分

How do I split image into pieces

本文关键字：个部 图像分割      更新时间：2023-09-26

我正在寻找一种将图像分割成块的方法。

可以使用tile_height和tile_width配置图像可分割的片段数量。查找帮助。

我不希望有任何框架的解决方案。仅使用普通JavaScript

我试过下面的

var _clipX =0;
var _clipY = _clipX;
var _clipHeight = IMAGE_HEIGHT/TILE_HEIGHT;
var _clipWidth = IMAGE_WIDTH/TILE_WIDTH;
var _nRows = Math.floor(IMAGE_HEIGHT/TILE_HEIGHT);
var _nColumns = Math.floor(IMAGE_WIDTH/TILE_WIDTH); 
for(var i=0;i<_nRows;i++){
    for(var j=0;j<_nColumns;j++){
        el.getContext('2d').drawImage(image, _clipX, _clipY, _clipWidth, _clipHeight, _clipX, _clipY,_clipWidth , _clipHeight);
        _clipX = _clipX + _clipWidth;
    }
    _clipX = 0
    _clipY = _clipY + _clipHeight;
}

以下是工作的JSFiddle

JSFiddle

是！！！

找到了。当你调用draw image时，它没有迭代图像标签的维度，而是迭代图像的自然维度，因此我遇到了这个问题。

现在我已经尝试了使用与img标签尺寸相同的图像大小，并且效果非常好。

感谢大家为提供的帮助

相关文章：