# html_to_image
**Repository Path**: obear997/html_to_image
## Basic Information
- **Project Name**: html_to_image
- **Description**: 前端实现html转图片的解决方案，本案例提供了3中解决方案
- **Primary Language**: JavaScript
- **License**: MulanPSL-1.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No
## Statistics
- **Stars**: 1
- **Forks**: 0
- **Created**: 2020-07-30
- **Last Updated**: 2022-04-06
## Categories & Tags
**Categories**: Uncategorized
**Tags**: None
## README
# html页面转换成图片
把html转化为图片可以有3种方案：
- canvas
- dom-to-image
- html2canvas
# canvas绘制网络图片报错（跨域）
canvas绘制网络图片时出现下面的报错，具体原因如下：
canvas.toDataURL在将网络图片地址进行本地输出会因为不同源而出现跨域问题，解决办法给img添加一个crossOrigin 属性，值为anonymous。
# 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
Github：https://github.com/tsayen/dom-to-image
dom-to-image是一个插件库可以将任意DOM节点转换成用JavaScript编写的矢量(SVG)或栅格(PNG或JPEG)图像，对于px、rem和em的单位都支持。
兼容性：
| 浏览器 | 是否支持 | 不支持的原因 |
| --- | --- | --- |
| Chrome | 是 | |
| Firefox | 是 | |
| IE | 否 | 它不支持SVG < nobject >标记 |
| Safari | 否 | 对< nobject >标签使用了更严格的安全模型。建议使用toSvg并在服务器上呈现。 |
# html2canvas
官网：[http://html2canvas.hertzen.com/?utm_source=caibaojian.com](http://html2canvas.hertzen.com/?utm_source=caibaojian.com)
Github：[https://github.com/niklasvh/html2canvas](https://github.com/niklasvh/html2canvas)
html2canvas将html转成图片，可以npm引入，也可以使用直接引入js文件。对于尺寸单位是px的生成图片清晰，但是对于单位是rem的，生成的图片中有一大片的空白，（绘制的内容没有占满整个canvas），虽然可以通过自定义width和height生成画布一样大的图片，但是图片有些模糊，所以如果可以将rem转成px或者em去生成图片。
兼容性：
| 支持的浏览器 |
| --- |
| Google Chrome 、Firefox 3.5+ 、Opera 12+、IE9+、Safari 6+ |