[學習筆記] 使用 HTML 實現截圖

HTML截圖-html2canvas使用記錄

前言

最近項目需求老是有HTML頁面生成圖片功能，因此就想記錄一下本身在過程當中遇到的問題，並加深印象，往後若是忘了也能夠回顧。咱們項目使用的是html2canvas插件，還有其餘插件，例如dom-to-image、rasterizehtml，能夠根據需求使用。

html2canvas使用問題彙總

項目中引入的是0.5.0-beta4版本的cdn連接,直接調用方法html2canvas(dom,options);第一個參數是你要繪製的dom對象，第二個參數是一些繪製的配置參數，個別參數我嘗試了也沒搞清楚具體什麼做用能夠自行看html2canvas文檔，對於我用到的直接上代碼：

// 生成圖片
        function generateImg() {
            var shareContent = document.body;// 須要繪製的部分的 (原生）dom 對象 ，注意容器的寬度不要使用百分比，使用固定寬度，避免縮放問題
            var width = shareContent.offsetWidth;  // 獲取(原生）dom 寬度
            var height = shareContent.offsetHeight;
            var offsetTop = shareContent.offsetTop;  //元素距離頂部的偏移量
            // var rect = shareContent.getBoundingClientRect();
            var canvas = document.createElement('canvas');  //建立canvas 對象
            var context = canvas.getContext('2d');
            var scaleBy = 3;  //像素密度 (也能夠採用自定義縮放比例)
            canvas.width = width * scaleBy;   //這裏 因爲繪製的dom 爲固定寬度，居中，因此沒有偏移
            canvas.height = (height + offsetTop) * scaleBy;  // 注意高度問題，因爲頂部有個距離因此要加上頂部的距離，解決圖像高度偏移問題
            canvas.height = height * scaleBy;
            // context.translate(0, -offsetTop); // 畫布偏移
            context.scale(scaleBy, scaleBy);
            html2canvas(shareContent, {
                logging: true, // 是否打印日誌，默認false
                taintTest: true, //檢測每張圖片都已經加載完成
                scale: scaleBy, // 添加的scale 參數
                canvas: canvas, //自定義 canvas
                width: width, //dom 原始寬度
                height: height, //dom 原始高度
                useCORS: true, //容許跨域
                onrendered: function(canvas) { // 頁面繪製成功後的回調
                    var url = canvas.toDataURL("image/png");
                    // 生成圖片後的操做
                }
            });
        }
複製代碼

圖片模糊解決

• 因爲像素比（DPR = 設備像素/CSS像素）的問題，電腦上截圖看着還行，到手機上就會很是模糊。繪製圖片時能夠根據像素比把圖片放大，使用時在定義圖片的寬度，也能夠自定義縮放比。縮放比也不是越大越好，太大了也可能會出問題。計算像素比的代碼：

function getPixelRatio(context){
        var backingStore = context.backingStorePixelRatio ||
                context.webkitBackingStorePixelRatio ||
                context.mozBackingStorePixelRatio ||
                context.msBackingStorePixelRatio ||
                context.oBackingStorePixelRatio ||
                context.backingStorePixelRatio || 1;
        return (window.devicePixelRatio || 1) / backingStore;
    }
複製代碼

• 繪圖時儘可能不要使用背景圖片，直接使用img這樣會更清晰

圖片跨域問題

有次頁面中使用了微信頭像，設置了useCORS: true不能顯示頭像，設置allowTaint:true直接報錯不能使用toDataURL可能沒法導出受污染的畫布；最後只有找百度了

• 修改Nginx配置文件，因爲咱們項目其餘地方也用到了，因此不便修改，能夠修改的參考：

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/;
}
複製代碼

• 把圖片轉換成base64格式並設置CrossOrigin="anonymous"，嘗試後有緩存的狀況下仍是不能正常生成圖片，須要在後面拼接一個隨機參數解決緩存問題，Android能夠了，但ios上仍是不行。
• 後來發現直接在微信頭像的img標籤上設置CrossOrigin="anonymous"即<img class="user-img" th:src="${wxUser.headImgUrl}" alt="" crossOrigin="anonymous" />，微信頭像的請求頭來就有access-control-allow-origin: *，Android和ios上均可以了，若是你以前嘗試過其餘方法，可能須要清下緩存，否則Android會誤導你不能正常顯示。
• 最近又發現一個html2canvas的options裏配置proxy爲跨域的url。

生成圖片替換頁面時閃現問題

前面幾回生成圖片，都沒有出現這個問題，最近一次出現了替換時頁面一閃，覺得是否是圖片太大了，我將兩個活動的圖片保存對比並非，具體我仍是沒搞清楚，不過經過先在dom中寫一個空的img標籤而後生成的src替換給img,判斷圖片加載完成後再將繪製的dom隱藏掉解決了這個問題。

css樣式超出顯示省略號消失

html2canvas不支持css樣式生成省略號，百度找到了解決方法，經過js判斷超過父盒子高度時用省略號替換

$(".info_text_box").each(function () {
            var divH = $(this).height();
            var $p = $("p", $(this)).eq(0);
            while ($p.outerHeight() > divH) {
                $p.html($p.html().replace(/(\s)*([a-zA-Z0-9]+|\W)(\.\.\.)?$/, "..."));
            };
        });
複製代碼

引入web字體時字體尚未顯示就生成圖片

window.onload=function(){}是等頁面資源加載完畢再執行,可是在ios中並不支持，後來發現當字體大小大於300px時不一樣字體的寬度差異很大，就經過定時器判斷字體大小來判斷字體是否加載成功，但最總由於字體文件加載太慢，就放棄了使用特殊字體

// 經過判斷字體內容寬度判斷字體加載完成
function fn_fontWatch(fontFamily, cb) {
        function fn_gen_span_with_font(font) {
            var span=document.createElement('span');
            span.style.cssText = "display:block;position:absolute;top:-9999px;left:-9999px;font-size:300px;width:auto;height:auto;line-height:normal;margin:0;padding:0;font-variant:normal;white-space:nowrap;font-family:" + font;
            span.innerHTML = 'BESbswy';
            document.body.append(span);
            return span;
        };
        var span_default = fn_gen_span_with_font('serif');
        var span_default_width = span_default.offsetWidth;
        document.body.removeChild(span_default);
        var span_font = fn_gen_span_with_font(fontFamily + ',serif');
            var fn_check_loop = function() {
                if(span_default_width !== span_font.offsetWidth){
                    document.body.removeChild(span_font);
                    cb();
                } else {
                    window.setTimeout(fn_check_loop,500);
                }
            };
            fn_check_loop();
    };
複製代碼

其餘問題

• 一次活動須要判斷進入頁面次序，html2canvas是經過遍歷dom繪製圖片的，當生成圖片時除了js都會從新執行一次，致使相似刷新頁面記錄次序，最後次序經過ajax請求獲取解決了問題；
• html2canvas只會截取頁面中可見的內容，設置了display: none、visibility:hidden的元素是截取不到的
• 生成圖片時文字有些許變化，好比安卓的數字1就變化特別明顯，並且文字的位置有點下移，緣由我沒找到，影響不大，目前我也沒解決；

最後

這些就是我在使用中遇到的問題以及解決方法，新手一枚，有錯誤請多多指教。