html2canvas实现网页保存为图片

最新推荐文章于 2025-07-11 16:09:48 发布

原创最新推荐文章于 2025-07-11 16:09:48 发布 · 3.7k 阅读

7 ·

CC 4.0 BY-SA版权

文章标签：

#canvas #html2canvas

javaScript 专栏收录该内容

26 篇文章

订阅专栏

本文介绍如何使用html2canvas库将网页内容转换为图片，包括解决跨域图片问题，提供两种canvas转img的方法，并实现高保真图片生成。

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

今天我们来学习一波怎么将一个网页生成一张图片的，主要的应用场景在，分享，截图等
我主要使用的是一个js库 html2canvas ,下面来了解一下他的详细用法吧。

大家可以去这里https://download.youkuaiyun.com/download/qq_20343517/10739325下载这个库
然后直接通过script标签引入或者通过其他方式导入也可以。

基于html2canvas.js 可将一个元素渲染为canvas，只需要简单的调用，html2canvas(element[,options]);即可，下列html2canvas方法会返回一个包含有canvas元素的promise：

html2canvas(document.body,{useCORS: true}).then(function(canvas) {
   document.body.appendChild(canvas);
});

由于canvas对于图片资源的同源限制，经测试，同时包含cdn图片和本地图片的资源的页面，只有本地图片能够被渲染出来。

canvas转img

方案一：基于原生canvas的 toDataURL 方法将canvas输出为 data:url 类型的图片地址，再将该图片的地址赋值给 image 元素的src属性即可，

方案二：使用第三方库 Canvas2Image.js 调用其 convertToImage 方法即可

<div id="box">
    <h1>hello world</h1>
    <img style="width:100px;" src="abc.png" alt="">
    <p style="background-color:#000;color:#fff;border:1px solid red;">我是一只大灰狼</p>
</div>
<a href="#" id="a" download>点击下载图片</a>

html2canvas(document.getElementById("box"),{useCORS: true}).then(function(canvas) {
    url=canvas.toDataURL();
    a=document.querySelector('#a');
    a.href=url;
});

高保真图片

可以参考这个链接https://segmentfault.com/a/1190000011478657