在 H5 活动页开发中，有时候运营希望实现“截屏出图”进行朋友圈分享的功能，比如我们熟悉的“长按页面保存为图片”，那这时就可以使用html2canvas来实现了。

快速入口 🔜
官网
GitHub

一. 基础介绍

是什么？

html2canvas 是一个 HTML 渲染器。该脚本允许你直接在用户浏览器截取页面或部分网页的“屏幕截屏”，屏幕截图是基于 DOM，因此生成的图片并不一定 100% 一致，因为它没有制作实际的屏幕截图，而是根据页面上可用的信息构建屏幕截图。

如何工作？

该脚本通过读取 DOM 以及应用于元素的不同样式，将当前页面呈现为 canvas 图像。

它不需要来自服务器的任何渲染，因为整个图像是在客户端上创建的。但是，由于它太依赖于浏览器，因此该库不适合在 nodejs 中使用。它也不会神奇地规避任何浏览器内容策略限制，因此呈现跨域内容将需要代理来将内容提供给相同的源。

该脚本仍然处理非常*实验状态，因此不建议在生产环境中使用它，也不建议使用它来构建应用程序，因为仍然会有重大更改。

浏览器兼容性？

该库应该可以在以下浏览器上正常工作

  • Firefox 3.5+
  • Google Chrome
  • Opera 12+
  • IE9+
  • Safari 6+

*由于需要手动构建每一个 CSS 属性以支持，因此还有许多尚不支持的属性。

二. 安装及官方例子

安装

Install NPM
npm install --save html2canvas

Install Yarn
yarn add html2canvas

使用方法

HTML

  1. <div id="capture" style="padding: 10px; background: #f5da55">
  2.     <h4 style="color: #000; ">Hello world!</h4>
  3. </div>

JavaScript

  1. import html2canvas from 'html2canvas'
  2. html2canvas(document.querySelector("#capture")).then(canvas => {
  3.     document.body.appendChild(canvas)
  4. });

三. 移动端清晰度实践

  1. // 源码提供者: dxy f2e 顾重
  2. /**
  3.  * 根据window.devicePixelRatio获取像素比
  4.  */
  5. function DPR () {
  6.   if (window.devicePixelRatio && window.devicePixelRatio > 1) {
  7.     return window.devicePixelRatio
  8.   }
  9.   return 1
  10. }
  11. /**
  12.  *  将传入值转为整数
  13.  */
  14. function parseValue (value) {
  15.   return parseInt(value, 10)
  16. }
  17. /**
  18.  * 绘制canvas
  19.  */
  20. function drawCanvas (selector) {
  21.   // 获取想要转换的 DOM 节点
  22.   var dom = document.querySelector(selector)
  23.   var box = window.getComputedStyle(dom)
  24.   // DOM 节点计算后宽高
  25.   var width = parseValue(box.width)
  26.   var height = parseValue(box.height)
  27.   // 获取像素比
  28.   var scaleBy = DPR()
  29.   // 创建自定义 canvas 元素
  30.   var canvas = document.createElement('canvas')
  31.   // 设定 canvas 元素属性宽高为 DOM 节点宽高 * 像素比
  32.   canvas.width = width * scaleBy
  33.   canvas.height = height * scaleBy
  34.   // 设定 canvas css宽高为 DOM 节点宽高
  35.   canvas.style.width = width + 'px'
  36.   canvas.style.height = height + 'px'
  38.   // 获取画笔
  39.   var context = canvas.getContext('2d')
  41.   // 将所有绘制内容放大像素比倍
  42.   context.scale(scaleBy, scaleBy)
  44.   var x = width
  45.   var y = height
  46.   return html2canvas(dom, {
  47.     useCORS: true,
  48.     canvas: canvas
  49.   }).then(function () {
  50.     convertCanvasToImage(canvas, x, y)
  51.   })
  52. }
  54. /**
  55.  * 图片转base64格式
  56.  */
  57. function convertCanvasToImage (canvas, x, y) {
  58.   var image = new Image()
  59.   image.width = x
  60.   image.height = y
  61.   image.src = canvas.toDataURL('image/png')
  62.   image.className = 'imageFromCanvas'
  63.   document.body.appendChild(image)
  64.   return image
  65. }

四. 不支持 CSS 属性整理

  • transform
  • border-style