如何使用HTML實(shí)現(xiàn)截圖功能

這篇文章主要介紹了如何使用HTML實(shí)現(xiàn)截圖功能，具有一定借鑒價(jià)值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

前言

最近項(xiàng)目需求總是有HTML頁(yè)面生成圖片功能，所以就想記錄一下自己在過(guò)程中遇到的問(wèn)題，并加深印象，日后如果忘了也可以回顧。我們項(xiàng)目使用的是html2canvas插件，還有其他插件，例如dom-to-image、rasterizehtml，可以根據(jù)需求使用。

html2canvas使用問(wèn)題匯總

項(xiàng)目中引入的是0.5.0-beta4版本的cdn鏈接,直接調(diào)用方法html2canvas(dom,options);第一個(gè)參數(shù)是你要繪制的dom對(duì)象，第二個(gè)參數(shù)是一些繪制的配置參數(shù)，個(gè)別參數(shù)我嘗試了也沒(méi)搞清楚具體什么作用可以自行看html2canvas文檔，對(duì)于我用到的直接上代碼：

// 生成圖片
        function generateImg() {
            var shareContent = document.body;// 需要繪制的部分的 (原生）dom 對(duì)象 ，注意容器的寬度不要使用百分比，使用固定寬度，避免縮放問(wèn)題
            var width = shareContent.offsetWidth;  // 獲取(原生）dom 寬度
            var height = shareContent.offsetHeight;
            var offsetTop = shareContent.offsetTop;  //元素距離頂部的偏移量
            // var rect = shareContent.getBoundingClientRect();
            var canvas = document.createElement('canvas');  //創(chuàng)建canvas 對(duì)象
            var context = canvas.getContext('2d');
            var scaleBy = 3;  //像素密度 (也可以采用自定義縮放比例)
            canvas.width = width * scaleBy;   //這里 由于繪制的dom 為固定寬度，居中，所以沒(méi)有偏移
            canvas.height = (height + offsetTop) * scaleBy;  // 注意高度問(wèn)題，由于頂部有個(gè)距離所以要加上頂部的距離，解決圖像高度偏移問(wèn)題
            canvas.height = height * scaleBy;
            // context.translate(0, -offsetTop); // 畫布偏移
            context.scale(scaleBy, scaleBy);
            html2canvas(shareContent, {
                logging: true, // 是否打印日志，默認(rèn)false
                taintTest: true, //檢測(cè)每張圖片都已經(jīng)加載完成
                scale: scaleBy, // 添加的scale 參數(shù)
                canvas: canvas, //自定義 canvas
                width: width, //dom 原始寬度
                height: height, //dom 原始高度
                useCORS: true, //允許跨域
                onrendered: function(canvas) { // 頁(yè)面繪制成功后的回調(diào)
                    var url = canvas.toDataURL("image/png");
                    // 生成圖片后的操作
                }
            });
        }

圖片模糊解決

• 由于像素比（DPR = 設(shè)備像素/CSS像素）的問(wèn)題，電腦上截圖看著還行，到手機(jī)上就會(huì)非常模糊。繪制圖片時(shí)可以根據(jù)像素比把圖片放大，使用時(shí)在定義圖片的寬度，也可以自定義縮放比。縮放比也不是越大越好，太大了也可能會(huì)出問(wèn)題。計(jì)算像素比的代碼：

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

• 繪圖時(shí)盡量不要使用背景圖片，直接使用img這樣會(huì)更清晰

圖片跨域問(wèn)題

有次頁(yè)面中使用了微信頭像，設(shè)置了useCORS: true不能顯示頭像，設(shè)置allowTaint:true直接報(bào)錯(cuò)不能使用toDataURL可能無(wú)法導(dǎo)出受污染的畫布；最后只有找百度了

• 修改Nginx配置文件，由于我們項(xià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/;
}

• 把圖片轉(zhuǎn)換成base64格式并設(shè)置CrossOrigin="anonymous"，嘗試后有緩存的情況下還是不能正常生成圖片，需要在后面拼接一個(gè)隨機(jī)參數(shù)解決緩存問(wèn)題，Android可以了，但ios上還是不行。

• 后來(lái)發(fā)現(xiàn)直接在微信頭像的img標(biāo)簽上設(shè)置CrossOrigin="anonymous"即<img class="user-img" th:src="${wxUser.headImgUrl}" alt="" crossOrigin="anonymous" />，微信頭像的請(qǐng)求頭來(lái)就有access-control-allow-origin: *，Android和ios上都可以了，如果你之前嘗試過(guò)其他方法，可能需要清下緩存，不然Android會(huì)誤導(dǎo)你不能正常顯示。

• 最近又發(fā)現(xiàn)一個(gè)html2canvas的options里配置proxy為跨域的url。

生成圖片替換頁(yè)面時(shí)閃現(xiàn)問(wèn)題

前面幾次生成圖片，都沒(méi)有出現(xiàn)這個(gè)問(wèn)題，最近一次出現(xiàn)了替換時(shí)頁(yè)面一閃，以為是不是圖片太大了，我將兩個(gè)活動(dòng)的圖片保存對(duì)比并不是，具體我還是沒(méi)搞清楚，不過(guò)通過(guò)先在dom中寫一個(gè)空的img標(biāo)簽然后生成的src替換給img,判斷圖片加載完成后再將繪制的dom隱藏掉解決了這個(gè)問(wèn)題。

css樣式超出顯示省略號(hào)消失

html2canvas不支持css樣式生成省略號(hào)，百度找到了解決方法，通過(guò)js判斷超過(guò)父盒子高度時(shí)用省略號(hào)替換

$(".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字體時(shí)字體還沒(méi)有顯示就生成圖片

window.onload=function(){}是等頁(yè)面資源加載完畢再執(zhí)行,但是在ios中并不支持，后來(lái)發(fā)現(xiàn)當(dāng)字體大小大于300px時(shí)不同字體的寬度差別很大，就通過(guò)定時(shí)器判斷字體大小來(lái)判斷字體是否加載成功，但最總因?yàn)樽煮w文件加載太慢，就放棄了使用特殊字體

// 通過(guò)判斷字體內(nèi)容寬度判斷字體加載完成
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();
    };

其他問(wèn)題

• 一次活動(dòng)需要判斷進(jìn)入頁(yè)面次序，html2canvas是通過(guò)遍歷dom繪制圖片的，當(dāng)生成圖片時(shí)除了js都會(huì)重新執(zhí)行一次，導(dǎo)致類似刷新頁(yè)面記錄次序，最后次序通過(guò)ajax請(qǐng)求獲取解決了問(wèn)題；

• html2canvas只會(huì)截取頁(yè)面中可見(jiàn)的內(nèi)容，設(shè)置了display: none、visibility:hidden的元素是截取不到的

• 生成圖片時(shí)文字有些許變化，比如安卓的數(shù)字1就變化特別明顯，而且文字的位置有點(diǎn)下移，原因我沒(méi)找到，影響不大，目前我也沒(méi)解決；

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享的“如何使用HTML實(shí)現(xiàn)截圖功能”這篇文章對(duì)大家有幫助，同時(shí)也希望大家多多支持億速云，關(guān)注億速云行業(yè)資訊頻道，更多相關(guān)知識(shí)等著你來(lái)學(xué)習(xí)!