前端开发 html2canvas代码转图片

前端为什么用vue开发|如何成为web前端开发工程师|前端开发工程师的个人网站

功能很简单，主要在于如何将生成的结果转为图片保存到本地……在网上搜了一圈后，发现了html2canvas.js这个神器：
html2canvas.js是个功能很强大的js插件，通过获取页面的DOM和元素的样式信息，并将其渲染成canvas图片实现给页面截图的功能。
换个角度想，其实我要实现的功能不就是把生成的结果截屏保存下来么？搞定，现把它的使用方法和遇到的坑及相应解决方案分享给大家：
如何使用？
html2canvas的使用很简单，在引入html2canvas文件后，传入一个 DOM 元素，然后通过回调拿到 canvas：
javascript 代码

以为可以轻松愉快的上线了，结果又粗来了一些小问题~
1. 默认生成的 canvas 图片在 retina 设备上显示很模糊，二维码都识别不了？
原来浏览器的window变量中有一个devicePixelRatio的属性，该属性决定了浏览器会用几个像素点来渲染1个像素，举例来说，假设devicePixelRatio的值为2，一张100×100像素大小的图片，在retina屏幕下，会用2个像素点的宽度去渲染图片的1个像素点，因此该图片在retina屏幕上实际会占据200×200像素的空间，相当于图片被放大了一倍，因此图片会变得模糊。知道了这一点，这个问题也就能理解了。当浏览器去渲染canvas的时候，他会用2个像素点的宽度去渲染canvas，因此在大多数retina设备的浏览器中会出现绘制的图片或文字变模糊的情况。
解决办法：处理成 2 倍图，就能解决这个问题，如下：
html 代码

2.处理成两倍图后生成的图片有一定偏移？

这是因为scale和rotate这样的方法都是针对坐标原点（默认左上角）进行操作的。在scale两倍的时候，canvas整体向右下角放大了两倍。如果想让canvas在中心位置放大，调整坐标原点（transform-origin）中心点即可。
javascript 代码

3.跨域的问题：所有的图片都需要在当前域下，这样Html2canvas才能不通过代理去读取到。同样地，如果你的页面上有其他的被跨域内容污染的canvas元素，html2canvas将不能准确渲染下来。
4.布局问题：html2canvas通过解析元素实际的样式来生成 canvas 图片内容，因此它对元素实际的布局和视觉显示有要求。如果要完整截图，最好将元素从文档流中独立出来（例如 position:absolute）。

微信商城前端用什么开发|前端开发工程师如何在2018年里提升自己|移动前端开发工程师招聘