html转image 保存到zip

最新推荐文章于 2025-06-16 12:02:59 发布

superHu123

最新推荐文章于 2025-06-16 12:02:59 发布

阅读量1.1k

点赞数 2

CC 4.0 BY-SA版权

分类专栏：前端文章标签：前端

本文链接：https://blog.youkuaiyun.com/call_me_doubi/article/details/80923392

前端专栏收录该内容

1 篇文章

订阅专栏

该博客介绍了如何将HTML转换为PNG或JPEG格式，并将其保存到ZIP文件中。通过html2canvas将DOM转换为canvas，然后利用canvas2image将canvas转化为图片资源，最后展示如何打包到ZIP进行下载。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

网页dom转换成png，jpeg等，并保存到zip

使用html2canvas将html转换成canvas
使用canvas2image将canvas转换成图片资源
直接保存或则打包到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");
            });

示例代码点击这里