最近接受的活中，有个需求，前端自动切一个长图。一般来说切图都是后端完成的，不过鉴于项目运行在手机端，对H5支持比较好，于是决定在前端完成切图工作。

一、准备。

首先是如果用H5实现的话，那么和图形相关的就是canvas画布了。然后去查阅相关属性方法，得到这么一些有用的方法。

• drawImage() 可以把img、video对象绘制到画布上。
• getImageData() 获取画布指定区域的像素数据集合。
• putImageData() 向画布上填充像素数据。
• toDataURL() 将canvas数据转化成dataurl。

二、流程。

了解了基本知识，现在开始着重实现。将图片进行切割的主要流程就是：

1. 获取指定图片对象，并获取起相关必要信息（长宽高等）。
2. 创建canvas对象，并将图片对象绘制到画布上。
3. 建立循环，分块获取画布对象指定区域数据。
4. 获取画布数据的同时，建立新的canvas对象，并将获取的数据写入到新画布上。
5. 将填充数据的新canvas添加到原图片对象后面。
6. 循环结束隐藏图片对象。

整个过程中，最需要注意的地方也就是同源策略。在canvas上绘制不同源图片后，是无法获取canvas上任何数据的！这个一定要注意。

三、实现

代码如下：

$(function () {
    var sImg = $("img.popup").get(0); // 获取图片对象

    var parNode = sImg.parentNode;
    var cH = sImg.naturalHeight;
    var cW = sImg.naturalWidth;
    var sC = document.createElement("canvas"); // 创建画布
    sC.width = cW;
    sC.height = cH;
    var sCtx = sC.getContext("2d");
    sCtx.drawImage(sImg, 0, 0); // 将图片绘制到画布上
    for(var y = 0; y < sC.height; y += 1200){
        var c = document.createElement("canvas"); // 创建新的画布
        c.width = cW;
        c.height = 1200;
        var imgData = sCtx.getImageData(0, y, cW, 1200); // 获取画布指定区域的数据
        c.getContext("2d").putImageData(imgData, 0, 0); // 将数据写入新建的画布上
        var img = new Image();
        img.src = c.toDataURL("image/png"); // 将画布转化成dataurl数据
        $(parNode).append(img);
    }
    $(sImg).hide();
})

最后

如果不是同源策略的问题，我想完全可以开发出web截图工具。