前端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的畫布配的大一倍就好了。