前端dom保存为图片

昨天处理了前端页面保存图片问题用于微信分享，这里涉及的的问题有三个：1.跨域问题。2，效率问题。3，清晰度问题。

前端dom转图片通常是用的html2canvas将dom元素转为图片，而后能够经过canvasimage保存图片为某种格式。

跨域问题，在手机上测试，若是页面里面嵌入跨域的图片，html2canvas是不会将图片画进去的，即便你设置了seCORS: true 也没用，由于微信api返回的头像是一个连接：http://thirdwx.qlogo.cn/mmopen/vi_32/******************************************************。要解决这个问题须要后端配合，用ng作代理服务器，而后将微信的域名换成服务器的域名，问题就解决了。前端工程师可能会对ng转发不太熟悉，以下：

location ^~ /wechat_image/ {

add_header 'Access-Control-Allow-Origin' "$http_origin" always;

add_header 'Access-Control-Allow-Credentials' 'true' always;

add_header 'Access-Control-Allow-Methods' 'GET, OPTIONS' always;

add_header 'Access-Control-Allow-Headers' 'Accept,Authorization,Cache-Control,Content-Type,DNT,If-Modified- Since,Keep-Alive,Origin,User-Agent,X-Requested-With' always; proxy_pass http://thirdwx.qlogo.cn/;

}

效率问题

一些复杂的dom生成图片是很慢的，特别是在手机上，如图下面一个简单例子：

 

生成图片并战术出来须要时间将近5秒，在手机端更慢。这基本上是没法接受的。

一种解决方法是启用多线程，提早开启wobwork，而不是点击按钮在生成，经过用户操做的延迟时间，但是webwork不能读取dom,这是行不通的。

另一种是不使用html2canvas，本身用canvas去构造若干dom元素较少。也就是对本身合适的一个dom保存图片方法，若是dom不复杂这样节约的时间很是多,本身写的比较复杂的是注意计算，不然生成的图片和样式不一致。以下：

基本上不到一秒时间，因此所过dom不太复杂，建议本身写canvas操做。

 清晰度问题

用html2canvas有时候会模糊，当让经过一些设置网上有不少方案，其实位图就是像素点，把canvas的画布配的大一倍就好了。