html 页面转换为图片

html2canvas + canvas2image

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

https://github.com/niklasvh/html2canvas

npm install --save html2canvas

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

用法：用ref来指定你需要截屏的dom，注意点：

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

更多用法可参考： https://segmentfault.com/a/1190000021275782

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

搭配 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);
    }
  });
}

其他可选库 html-to-image 、 dom-to-image-more

还有 html-to-image 、 dom-to-image-more 等同类 js 库，可实现将网页直接转换为图片，不需要两步处理。

转成 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');

  }
})