html轉image 儲存到zip

網頁dom轉換成png，jpeg等，並儲存到zip

1. 使用html2canvas將html轉換成canvas
2. 使用canvas2image將canvas轉換成圖片資源
3. 直接儲存或則打包到zip   

1.html2canvas使用

html2canvas(document.body).then(function(canvas) {
    document.body.appendChild(canvas);
});

簡單示例：html2canvas(element, [options]);

options具體引數看這裡

2.canvas2image使用

有兩種使用方式，第一種直接儲存

Canvas2Image.saveAsImage(canvasObj, width, height, type)
Canvas2Image.saveAsPNG(canvasObj, width, height)
Canvas2Image.saveAsJPEG(canvasObj, width, height)
Canvas2Image.saveAsGIF(canvasObj, width, height)
Canvas2Image.saveAsBMP(canvasObj, width, height)

第二種生成圖片資源

Canvas2Image.convertToImage(canvasObj, width, height, type)
Canvas2Image.convertToPNG(canvasObj, width, height)
Canvas2Image.convertToJPEG(canvasObj, width, height)
Canvas2Image.convertToGIF(canvasObj, width, height)
Canvas2Image.convertToBMP(canvasObj, width, height)

3.生成png並儲存

html2canvas(document.getElementById(id))
.then(function (canvas) {
    //Canvas2Image.convertToPNG(canvas);
    Canvas2Image.saveAsPNG(canvas);
});

4.打包到zip

zip使用示例：

var zip = new JSZip();
zip.file("Hello.txt", "Hello World\n");
var img = zip.folder("images");
img.file("smile.gif", imgData, {base64: true});
zip.generateAsync({type:"blob"})
.then(function(content) {
    // see FileSaver.js
    saveAs(content, "example.zip");
});

如果生成的是單張圖片可以直接儲存，如果需要生成多張，這個時候就需要將生成的圖片打包下載

        var zip = new JSZip();
        var img = zip.folder('images'); // 新建一個images目錄
        $('.show').each(function (index) {
            var id = $(this).attr('id');
            // 這裡的element只能是html dom 使用$(this)會報錯
            // { useCORS: true } 如果需要跨域載入圖片
            var data = html2canvas(document.getElementById(id), { useCORS: true })
                .then(function (canvas) {
                    var image = Canvas2Image.convertToPNG(canvas, 1920, 1080);
                    var image_data = $(image).attr('src');
                    // 生成的image_data是圖片連結，不能直接儲存為圖片，需要做一下擷取
                    return image_data.split('data:image/png;base64,')[1];
                });

            img.file(id + '.jpg', data, { base64: true });
        })

        zip.generateAsync({ type: "blob" })
            .then(function (content) {
                saveAs(content, "example.zip");
            });

示例程式碼點選這裡