html转image 保存到zip（html保存成图片）

网页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");
 });

示例代码点击这里

喜欢请点击关注哦谢谢啦，另外，更多精彩内容敬请关注百战程序员哦!