网页截图之停止GIF

经常会有用到网页截取的时候，截取方法很简单，但是如果页面里GIF图很多的话，会出现截断，即GIF上下画面不一致（因为本质上全屏截图也都是先截屏幕再拼接的）。花点功夫找了下，记录之。

都是以Chrome为例，其它浏览器就自行google咯。首先去下一个自己喜欢的全屏截图插件，传送门。

小tip：微信页面采用的是 lazy load 模式，要自己浏览一遍全文才能加载所有的GIF和图片。

然后就打开开发者模式，快捷键 cmd+alt+i，选择标签为 console 的一栏，将下述代码粘贴进去，回车即可。

function createElement(type, callback) {
    var element = document.createElement(type);

    callback(element);

    return element;
}

function freezeGif(img) {
    var width = img.width,
    height = img.height,
    canvas = createElement('canvas', function(clone) {
        clone.width = width;
        clone.height = height;
    }),
    attr,
    i = 0;

    var freeze = function() {
        canvas.getContext('2d').drawImage(img, 0, 0, width, height);

        for (i = 0; i < img.attributes.length; i++) {
            attr = img.attributes[i];

            if (attr.name !== '"') { // test for invalid attributes
                canvas.setAttribute(attr.name, attr.value);
            }
        }

        canvas.style.position = 'absolute';

        img.parentNode.insertBefore(canvas, img);
        img.style.opacity = 0;
    };

    if (img.complete) {
        freeze();
    } else {
        img.addEventListener('load', freeze, true);
    }
}

function freezeAllGifs() {
    return new Array().slice.apply(document.images).map(freezeGif);
}

freezeAllGifs();

代码自 Stopping GIF Animation Programmatically 处拷贝。

然后GIF图就都不动啦。

完。