html页面转换成图片的三种方法——canvas、dom-to-image、html2canvas

如果需要代码详情请前往下载：https://github.com/LiYaMei94/html_to_image

canvas绘制网络图片报错（跨域）

canvas绘制网络图片时出现下面的报错，最后在伟大的“度娘”中找到了原因，canvas.toDataURL在将网络图片地址进行本地输出会因为不同源而出现跨域问题，解决办法给img添加一个crossOrigin 属性，值为anonymous。

使用canvas将html页面转成图片

canvas的用户相信大家都很熟悉，这里就不在描述了，直接上代码了。

canvas 绘制的图片模糊原因：
canvas 绘图时，会从两个物理像素的中间位置开始绘制并向两边扩散 0.5 个物理像素。当设备像素比为 1 时，一个 1px 的线条实际上占据了两个物理像素（每个像素实际上只占一半），由于不存在 0.5 个像素，所以这两个像素本来不应该被绘制的部分也被绘制了，于是 1 物理像素的线条变成了 2 物理像素，视觉上就造成了模糊。

canvas 绘制的图片模糊解决办法：

canvas 标签中的 width 和 height 属性并不是 css 中的宽高，而是 canvas 绘图上下文（绘图区域）的宽高，当不设置 canvas 的 css 宽高时，canvas 会将 width 和 height 的值作为 css 宽高，而 css 宽高是元素在页面上的可见大小。

属性 devicePixelRatio 能够返回当前显示设备的物理像素分辨率与 CSS 像素分辨率的比率。此值也可以解释为像素大小的比率：一个 CSS 像素的大小与一个物理像素的大小的比值。简单地说，这告诉浏览器应该使用多少个屏幕的实际像素来绘制单个 CSS 像素。

canvas 绘制的图片模糊的最终解决办法是：获取到devicePixelRatio，将canvas的css宽度、高度设置为canvas 标签中的 width 和 height 的devicePixelRatio倍，在绘制的过程中对于字体大小、宽高、位置等尺寸都乘以devicePixelRatio。

dom-to-image

dom-to-image是一个插件库可以将任意DOM节点转换成用JavaScript编写的矢量(SVG)或栅格(PNG或JPEG)图像，对于px、rem和em的单位都支持，点我去看dom-to-image。
兼容性：

浏览器	是否支持	不支持的原因
Chrome	是
Firefox	是
IE	否	它不支持SVG < nobject >标记
Safari	否	对< nobject >标签使用了更严格的安全模型。建议使用toSvg并在服务器上呈现。

html2canvas

html2canvas将html转成图片，可以npm引入，也可以使用直接引入js文件。对于尺寸单位是px的生成图片清晰，但是对于单位是rem的，生成的图片中有一大片的空白，（绘制的内容没有占满整个canvas），虽然可以通过自定义width和height生成画布一样大的图片，但是图片有些模糊，所以如果可以将rem转成px或者em去生成图片。html2canvas详情，参数详情。
兼容性：

支持的浏览器
Google Chrome 、Firefox 3.5+ 、Opera 12+、IE9+、Safari 6+

生成的图片在页面上的展示效果：

这些插件多多多少少都有一些问题，所以能自己使用canvas写的就自己写吧，别偷懒了，，，，，，