html2canvas实现网页截图下载功能

canvas

发布日期: 2021-04-30

最近项目中遇到一个需要把网页保存为图片的需求，有的需要截取整个页面，有的只对部门内容进行截取。
html 转图片有两种方法：

将DOM改写为canvas，然后利用canvas的toDataURL方法实现将DOM输出为包含图片展示的data url。
使用HtmlCanvas2实现。

html2canvas 安装

安装html2canvas

npm install html2canvas

引入html2canvas

import html2canvas from 'html2canvas'

html2canvas的使用方法

第一种
基于html2canvas.js可将一个元素渲染为canvas，然后Promise对象会将截取的图片传递给参数canvas

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

第二种
上一步生成的canvas即为包含目标元素的canvas元素对象。实现保存图片的目标只需要将canvas转image即可。
基于原生canvas的toDataURL方法将canvas输出为data: URI类型的图片地址，再将该图片地址赋值给元素的src属性即可。

html2canvas(document.getElementById("target"), {
  allowTaint: true, //允许污染
  taintTest: true, 
  useCORS: true, //使用跨域(当allowTaint为true时这段代码没什么用)
  background: "#fff",
  onrendered: function (canvas) {
    imgBlob = canvas.toDataURL('image/jpeg', 1.0); //将图片转为base64, 0-1 表示清晰度
    imgBlob = imgBlob.toString().substring(imgBlob.indexOf(",") + 1);//截取base64以便上传
  }
});

解决截图不全问题（留白问题）

这个问题经常发生在滚动条后进行截图出现，解决方案就是截图之前把滚动到顶部在进行截图

//滚动条滚动到顶部
  window.pageYoffset = 0;
  document.documentElement.scrollTop = 0;
  document.body.scrollTop = 0;
  html2canvas(document.getElementById('target'), {
    allowTaint: false,
    useCORS: true,
    height: document.getElementById('target').scrollHeight,
    windowHeight: document.getElementById('target').scrollHeight
  }).then(function (canvas) {
    // base64图片
    let dataImg = canvas.toDataURL("image/png");
    
  });

html2canvas参数

选项	默认	描述
async	true	是否异步解析和呈现元素
allowTaint	false	是否允许跨原始图像污染画布
backgroundColor	#ffffff	画布背景颜色，如果在DOM中未指定，设置 null 为透明
canvas	null	现有画布元素用作绘图的基础
foreignObjectRendering	false	是否在浏览器支持的情况下使用ForeignObject渲染持
imageTimeout	15000	加载图像的超时（以毫秒为单位，设置 0 为禁用超时
ignoreElements	(element)=>false	谓词函数（如果一元函数返回一个BOOL类型的值，则该函数称为谓词），用于从渲染中删除匹配元素
logging	true	启用日志记录以进行调试
onclone	-	在克隆文档进行渲染时调用的回调函数可用于修改将在不影响原始源文档的情况下呈现的内容。
proxy	null	rl到代理，用于加载跨源图像。如果留空，则不会加载跨原始图像。
removeContainer	true	是否要清理克隆的DOM元素html2canvas会暂时创建
scale	window.devicePixelRatio	用于渲染的比例，默认为浏览器设备像素比率
useCORS	false	用来设置是否允许使用跨域的图片进行访问
width	element width	canvas的宽度
height	element height	canvas高度设定
x	element x-offset	裁剪画布x坐标
y	element y-offset	裁剪画布y坐标
scrollX	element scrollX	渲染元素时使用的x滚动位置（例如，如果Element使用 position: fixed ）
scrollY	element scrollY	渲染元素时使用的y滚动位置（例如，如果Element使用 position: fixed ）
windowWidth	Window.innerWidth	渲染元素时使用的窗口宽度，这可能会影响媒体查询之类的东西
windowHeight	Window.innerHeght	渲染时使用的窗口高度 Element ，这可能会影响媒体查询等内容
taintTest	true	在渲染前测试图片