前端开发 HTML2canvas代码转图片

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

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

html2canvas(element, {
    onrendered: function(canvas) {
        // canvas is the final rendered <canvas> element
    },
})

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

var div = $(‘.pop-in’)
var w = div.width()
var h = div.height()
//要将 canvas 的宽高设置成容器宽高的 2 倍
var canvas = document.createElement(‘canvas’)
canvas.width = w * 2
canvas.height = h * 2
canvas.style.width = w + ‘px’
canvas.style.height = h + ‘px’
var context = canvas.getContext(‘2d’)
//然后将画布缩放,将图像放大两倍画到画布上
context.scale(2, 2)
html2canvas(div, {
    canvas: canvas,
    onrendered: function(canvas) {
        var image = new Image()
        image.id = ‘newimg’
        image.crossOrigin = ‘Anonymous’
        image.src = canvas.toDataURL(‘image/png’)
        div.append(image)
    },
})

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

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

var cenX = div.offset().left * 2
var cenY = div.offset().top * 2
context.translate(-cenX, -cenY)

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

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

» 本文来自:前端开发者 » 《前端开发 HTML2canvas代码转图片》
» 本文链接地址:https://www.rokub.com/5159.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!