js核心代码
1 /* 2 *canvasid:html canvas标签id 3 *imageid:html img 标签id 4 *gridcountX:x轴图片分割个数 5 *gridcountY:y轴图片分割个数 6 *gridspace:宫格空隙 7 *offsetX：x*y宫格相对canvas（0，0）X坐标偏移量 8 **offsetX：x*y宫格相对canvas（0，0）Y坐标偏移量 9 *isanimat：是否启用动画显示 10 */ 11 function ImageGrid(canvasid, imageid, gridcountX, gridcountY, gridspace, offsetX, offsetY, isanimat) { 12 var image = new Image(); 13 var g = document.getElementById(canvasid).getContext("2d"); 14 var img=document.getElementById(imageid); 15 image.src=img.getAttribute("src"); 16 g.drawImage(image, 0, 0); 17 var imagedata = g.getImageData(0, 0, image.width, image.height); 18 var grid_width = imagedata.width / gridcountX; 19 var grid_height = imagedata.height / gridcountY; 20 //动画 21 if (isanimat) { 22 var x = 0, 23 y = 0; 24 var inter = setInterval(function() { 25 g.putImageData(imagedata, gridspace * x + offsetX, gridspace * y + offsetY, grid_width * x, grid_height * y, grid_width, grid_height); 26 x < gridcountX ? x++ : x = 0; 27 if (x == 0) { 28 y < gridcountY ? y++ : y = 0; 29 } 30 }, 200); 31 y == gridcountY ? clearInterval(inter) : null; 32 } else { //非动画 33 for (var y = 0; y < gridcountY; y++) { 34 for (var x = 0; x < gridcountX; x++) { 35 g.putImageData(imagedata, gridspace * x + offsetX, gridspace * y + offsetY, grid_width * x, grid_height * y, grid_width, grid_height); 36 } 37 } 38 } 39 }
https://files.cnblogs.com/veiny/image_grid.xml
下载该xml文件后缀名改为html，打开浏览器观看。