我如何將圖片分割成片段

Question

我正在尋找一種將圖片分成塊的方法。

可以使用tile_height和tile_width.Looking尋求幫助，可以將圖像分割成的塊的數量可以配置。

我不想要任何框架的解決方案。只有使用香草的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

是！

找到它。當您調用繪製圖像時，它不會遍歷圖像標記維度，而是遍歷圖像的自然尺寸，因此是我面臨的問題。

現在我已經嘗試過與我的img標籤尺寸相同的圖像尺寸，它的工作原理非常好。

謝謝大家對我們提供的幫助