如何将图像分成几部分

Question

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

可以使用 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

Answer 1

是的！！！

找到了。 当您调用 draw image 时，它​​不是迭代图像标签尺寸，而是迭代图像的自然尺寸，因此是我面临的问题。

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

感谢大家提供的帮助