使用html2canvas.js将HTML转为canvas

最新推荐文章于 2025-06-05 09:35:08 发布

花铛

最新推荐文章于 2025-06-05 09:35:08 发布

阅读量2.3k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： JS 库文章标签： JS插件

本文链接：https://blog.youkuaiyun.com/wsln_123456/article/details/103195155

JS 库专栏收录该内容

7 篇文章

订阅专栏

本文详细介绍html2canvas脚本的使用方法，包括如何在浏览器端实现页面截屏，配置参数解析，以及解决生成图片白边问题的技巧。适用于前端开发者。

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

html2canvas能够实现在用户浏览器端直接对整个或部分页面进行截屏。他不需要来自服务器任何渲染，整张图片都是在客户端浏览器创建。
html2canvas脚本将页面渲染成一个canvas图片，通过读取DOM并将不同的样式应用到这些元素上实现。
当浏览器不支持canvas时，将采用Flashcanvas或ExplorerCanvas技术代替实现。以下浏览器能够很好的支持该脚本：Firefox 3.5+, Google Chrome, Opera新的版本, IE9以上的浏览器。

html2camvas不能识别svg，可以通过canvg插件或rasterizehtml插件将svg转化为canvas。

引入：

引入js文件：

<script src="../js/html2canvas.js"></script>

npm引入：npm install html2canvas
如果在Vue中使用的话，安装完成后还需要在使用的组件中引入：
```
import html2canvas from 'html2canvas'
```

语法：

html2canvas(element, options).then(function(canvas){
	...
});

第一个参数是所需要截图的元素的id；第二个参数是配置参数；then是截图后要执行的函数，canvas为截图后返回的最后一个canvas。

配置参数：
useCORS：boolean类型，使用CORS尝试加载图片；
allowTaint：boolean类型，是否允许跨域图片污染canvans画布；
proxy：使用代理去加载跨域图片；
timeout：图片延迟加载，默认延迟为0，单位毫秒；
taintTest：是否在渲染前测试图片；
logging：在console.log()中输出信息；
width：canvas宽度；
height：canvas高度；
background：canvas的背景颜色，如果没有设置，默认透明；
letterRendering：字间距；

<template>
    <div>
      <button id="btn" style="margin:10px;">按钮</button>
      <div id="map" style="width:900px;height:900px;"></div>
    </div>
</template>

document.getElementById('btn').addEventListener('click',function(){
     html2canvas(document.getElementById('map'),{
          useCORS:true,
          allowTaint :true
     }).then(function(canvas) {
     	//获得图片的base64
      	var dataURL = canvas.toDataURL('image/png');
      	
        let arr = dataURL.split(','),
            mime = arr[0].match(/:(.*?);/)[1], // arr[0]是data:image/png;base64            
            bstr = atob(arr[1]),
            n = bstr.length,
            u8arr = new Uint8Array(n)
         while (n--) {
                u8arr[n] = bstr.charCodeAt(n)
         }
         //转成blob对象
        var blob =  new Blob([u8arr], {
              type: mime
         }）
         
     	document.body.appendChild(canvas);
     });
})

解决html2canvas生成图片有白边的问题：

html2canvas(dom, {
  useCORS: true,
  width: dom.offsetWidth,  // 可以设置canvas的宽度、高度与所截图宽度、高度相同或者更小，从而解决白边问题
  height: dom.offsetHeight      
}).then((canvas) => {});