前端为什么用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年里提升自己|移动前端开发工程师招聘
评论前必须登录!
注册