html2canvas 页面转换为图片

介绍

html2canvas 可直接在用户浏览器上将网页或部分网页生成"屏幕截图"，屏幕截图基于 DOM。

https://github.com/niklasvh/html2canvas

npm install --save html2canvas

缺点：不保证完全渲染页面效果，部分兼容性较高但属性无法展示，如滤镜、文字描边等。

用法

用ref来指定你需要截屏的dom

html2canvas(imageWrapperRef.current).then(canvas => {
  let dataURL = canvas.toDataURL("image/png");
});

参考： https://segmentfault.com/a/1190000021275782

注意点：

• 图片都使用本地图片
• 尽量使用 px 而不是相对单位

转成图片下载

搭配 canvas2image (https://github.com/hongru/canvas2image) 转成图片下载：

import html2canvas from 'html2canvas';
import Canvas2Image from './canvas2image';

/**
 * 基础版快照方案
 * @param {HTMLElement} container
 * @param {object} options html2canvas相关配置
 */
function convertToImage(container: HTMLElement, options = {}) {
  return html2canvas(container, options).then((canvas) => {
    const imageEl = Canvas2Image.convertToPNG(canvas, canvas.width, canvas.height);
    if (imageEl) {
      setTimeout(() => {
        // atob() 方法用于解码使用 base-64 编码的字符串
        let bytes = atob(imageEl.src.split(',')[1]);
        let arrayBuffer = new ArrayBuffer(bytes.length);
        let uint8Array = new Uint8Array(arrayBuffer);
        for (let i = 0; i < bytes.length; i++) {
          uint8Array[i] = bytes.charCodeAt(i);
        }
        let blob = new Blob([arrayBuffer], { type: 'image/png' });

        // 下载
        let objectURL = URL.createObjectURL(blob);

        const a = document.createElement('a');
        a.download = +new Date() + '.png';
        a.rel = 'noopener';
        a.href = objectURL;
        a.dispatchEvent(new MouseEvent('click'));
        URL.revokeObjectURL(objectURL);
      }, 70);
    }
  });
}

转成 PDF 下载

搭配 jsPDF (https://github.com/MrRio/jsPDF) 转成 PDF下载：

html2canvas(document.body, {
  onrendered:function(canvas) {
      //返回图片dataURL，参数：图片格式和清晰度(0-1)
      var pageData = canvas.toDataURL('image/jpeg', 1.0);

      //方向默认竖直，尺寸ponits，格式a4[595.28,841.89]
      var pdf = new jsPDF('', 'pt', 'a4');

      //addImage后两个参数控制添加图片的尺寸，此处将页面高度按照a4纸宽高比列进行压缩
      pdf.addImage(pageData, 'JPEG', 0, 0, 595.28, 592.28/canvas.width * canvas.height );

      pdf.save('stone.pdf');

  }
})