昨天處理了前端頁面保存圖片問題用於微信分享，這里涉及的的問題有三個：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的畫布配的大一倍就行了。