阿西河

所有教程

公众号
🌙
阿西河前端的公众号

我的收藏

    最近访问  (文章)

      教程列表

      抓包专区
      测试专区

      html2canvas

      如何将 HTML 页面保存为图片?

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

      优缺点分析

      • (1)、利用 DOM 改写为 canvas 的方式:相当于完全重写了整个页面的布局样式,增加了工作量。 由于 canvas 中没有的对象概念,对于元素丰富、布局复杂的页面,不易重构。 所有 DOM 元素改写进 canvas 会带来一些困难。例如:难以支持响应式。
      • (2)、利用 HtmlCanvas 的方式:只需简单调用 html2canvas 方法并设定配置项即可。脚本使用的所有图像需要驻留在同一个源下,如果页面上有其他画布元素,这些元素已经被跨源内容污染,不再能被 html2canvas 读取。
      • (3)、使用 rasterizeHTML.js 实现:限制较多,目前仅支持 3 类可转为 canvas 的目标格式:页面 url,html 字符串和 document 对象。

      html2canvas 脚本截图原理

      脚本允许你直接在用户浏览器上获取网页的截图或部分内容。屏幕截图是基于 DOM 的,因此对于真实的表示来说,它可能不是 100% 准确的,因为它不做实际的屏幕截图,而是基于页面上可用的信息构建屏幕截图。它实际上并不获取页面的屏幕截图,而是基于从 DOM 读取的属性构建页面的表示。

      因此,它只能正确地描述它所理解的属性,这意味着有许多 CSS 属性不起作用。

      怎样安装使用 html2canvas?

      安装

      npm install html2canvas
      

      引入

      import html2canvas from ‘html2canvas’;
      

      html2canvas 的使用方法

      第一步:实现保存为图片的第一步:html 转为 canvas

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

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

      第二步:canvas 转 image

      上一步生成的 canvas 即为包含目标元素的 canvas 元素对象。实现保存图片的目标只需要将 canvas 转 image 即可。

      基于原生 canvas 的 toDataURL 方法将 canvas 输出为 data: URI 类型的图片地址,再将该图片地址赋值给元素的 src 属性即可。

      跨域图片的设置

      针对 CDN 中的图片的配置

      开启 html2canvas 的 useCORS 配置项 (useCORS: true)

      如果没有开启 html2canvas 的 useCORS 配置项,html2canvas 会正常执行且不会报错,但是不会输出对应的 CDN 图片

      (已测试同时包含 CDN 的图片和本地图片的资源的页面,但是只有本地图片能够被正常渲染出来)

      演示代码

      convert2canvas() {
      
          var cntElem = $('#j-sec-end')[0];
      
          var shareContent = cntElem;//需要截图的包裹的(原生的)DOM 对象
          var width = shareContent.offsetWidth; //获取dom 宽度
          var height = shareContent.offsetHeight; //获取dom 高度
          var canvas = document.createElement("canvas"); //创建一个canvas节点
          var scale = 2; //定义任意放大倍数 支持小数
          canvas.width = width * scale; //定义canvas 宽度 * 缩放
          canvas.height = height * scale; //定义canvas高度 *缩放
          canvas.getContext("2d").scale(scale, scale); //获取context,设置scale
          var opts = {
              scale: scale, // 添加的scale 参数
              canvas: canvas, //自定义 canvas
              // logging: true, //日志开关,便于查看html2canvas的内部执行流程
              width: width, //dom 原始宽度
              height: height,
              useCORS: true // 【重要】开启跨域配置
          };
      
          html2canvas(shareContent, opts).then(function (canvas) {
      
              var context = canvas.getContext('2d');
              // 【重要】关闭抗锯齿
              context.mozImageSmoothingEnabled = false;
              context.webkitImageSmoothingEnabled = false;
              context.msImageSmoothingEnabled = false;
              context.imageSmoothingEnabled = false;
      
              // 【重要】默认转化的格式为png,也可设置为其他格式
              var img = Canvas2Image.convertToJPEG(canvas, canvas.width, canvas.height);
      
              document.body.appendChild(img);
      
              $(img).css({
                  "width": canvas.width / 2 + "px",
                  "height": canvas.height / 2 + "px",
              }).addClass('f-full');
      
          });
      }
      

      参考链接

      更多 HTML 搜索

      通过查看前端开发者在搜索引擎里的搜了哪些 HTML 内容,可以知道他们实际工作使用了什么技术或者什么地方薄弱;

      你可以通过点击 HTML 常见搜索 来查看前端开发者都在搜哪些内容;

      注:这里仅收录了常见搜索,并不是无论搜索什么都记录在里面的;

      如果你是为了面试做准备的,那么推荐你查看 HTML面试题,这里基本包涵了市场上的所有 HTML 方面的面试题,让你更加牢固的掌握 HTML 知识

      目录
      目录