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 知识
