小編給大家分享一下如何使用html2canvas.js實(shí)現(xiàn)頁面截圖并顯示或上傳，希望大家閱讀完這篇文章之后都有所收獲，下面讓我們一起去探討吧！

創(chuàng)新互聯(lián)公司專注于織金企業(yè)網(wǎng)站建設(shè),成都響應(yīng)式網(wǎng)站建設(shè),商城系統(tǒng)網(wǎng)站開發(fā)。織金網(wǎng)站建設(shè)公司,為織金等地區(qū)提供建站服務(wù)。全流程按需設(shè)計(jì)，專業(yè)設(shè)計(jì)，全程項(xiàng)目跟蹤，創(chuàng)新互聯(lián)公司專業(yè)和態(tài)度為您提供的服務(wù)

一、導(dǎo)入html2canvas.js

這個(gè)不需要多說，可以從github上獲取： https://github.com/niklasvh/html2canvas

也可以直接導(dǎo)入鏈接：<script src="https://cdn.bootcss.com/html2canvas/0.5.0-beta4/html2canvas.js"></script>

使用起來也非常簡單，具體的API可以去網(wǎng)上查找，生成png圖片使用“image/png”即可。

其中$("#xxx")為你想要截取的div，外面可以通過jquery獲取它，當(dāng)然document獲取也是可以的。

html2canvas($("#xxx"), {
         onrendered: function (canvas) {
             var url = canvas.toDataURL("image/png");
　　　　　　　 window.location.href = url;
           }
   });

其它類型的圖片如jpg，為image/jpeg等等，可自行查詢API。

到這里其實(shí)簡單的截圖已經(jīng)完成了，如果界面稍微復(fù)雜一點(diǎn)的話，可能就會(huì)出現(xiàn)各種坑，下面一個(gè)一個(gè)解決。

二、svg無法截取的問題

當(dāng)我們截取一個(gè)div時(shí)，如果這個(gè)div中存在svg標(biāo)簽，一般情況下是截取不到的，比如截取一個(gè)流程圖，得到的是下面這個(gè)樣子：

可以看到，流程圖的線沒有截取到，也就是svg沒有截取到，這時(shí)的解決方法是把svg轉(zhuǎn)換成canvas再進(jìn)行截圖即可，直接上代碼。

這里的each循環(huán)是循環(huán)所有的svg標(biāo)簽，將它們?nèi)哭D(zhuǎn)換為canvas

if (typeof html2canvas !== 'undefined') {
        //以下是對(duì)svg的處理
        var nodesToRecover = [];
        var nodesToRemove = [];
        var svgElem = cloneDom.find('svg');
        svgElem.each(function (index, node) {
            var parentNode = node.parentNode;
            var svg = node.outerHTML.trim();

            var canvas = document.createElement('canvas');
            canvas.width = 650;
            canvas.height = 798;
            canvg(canvas, svg); 
            if (node.style.position) {
                canvas.style.position += node.style.position;
                canvas.style.left += node.style.left;
                canvas.style.top += node.style.top;
            }

            nodesToRecover.push({
                parent: parentNode,
                child: node
            });
            parentNode.removeChild(node);

            nodesToRemove.push({
                parent: parentNode,
                child: canvas
            });

            parentNode.appendChild(canvas);
        });
        
   }

這里需要用到canvg.js，以及它的依賴文件rgbcolor.js，網(wǎng)上可以直接下載，也可以直接導(dǎo)入。

三、背景透明的問題

這個(gè)其實(shí)很簡單，因?yàn)樗J(rèn)是透明的，html2canvas中有一個(gè)參數(shù)background就可以添加背景色，如下：

html2canvas(cloneDom, {
      onrendered: function(canvas) {
           var url =canvas.toDataURL("image/png");
      },
      background:"#fafafa"
});

四、只能截取可視部分的問題

如果需要截取的div超出了界面，可能會(huì)遇到截取不全的問題，如上圖，只有一半的內(nèi)容，這是因?yàn)榭床坏降牟糠直浑[藏了，而html2canvas是無法截取隱藏的dom的。

所以此時(shí)的解決辦法是使用克隆，將需要截取的部分克隆一份放在頁面底層，再使用html2canvas截取這個(gè)完整的div，截取完成后再remove這部分內(nèi)容即可，完整代碼如下：

function showQRCode() {
    scrollTo(0, 0);
    
    //克隆節(jié)點(diǎn)，默認(rèn)為false，即不復(fù)制方法屬性，為true是全部復(fù)制。
    var cloneDom = $("#d1").clone(true);
    //設(shè)置克隆節(jié)點(diǎn)的z-index屬性，只要比被克隆的節(jié)點(diǎn)層級(jí)低即可。
    cloneDom.css({
        "background-color": "#fafafa",
        "position": "absolute",
        "top": "0px",
        "z-index": "-1",
        "height": 798,
        "width": 650
    });
   
    if (typeof html2canvas !== 'undefined') {
        //以下是對(duì)svg的處理
        var nodesToRecover = [];
        var nodesToRemove = [];
        var svgElem = cloneDom.find('svg');//divReport為需要截取成圖片的dom的id
        svgElem.each(function (index, node) {
            var parentNode = node.parentNode;
            var svg = node.outerHTML.trim();

            var canvas = document.createElement('canvas');
            canvas.width = 650;
            canvas.height = 798;
            canvg(canvas, svg); 
            if (node.style.position) {
                canvas.style.position += node.style.position;
                canvas.style.left += node.style.left;
                canvas.style.top += node.style.top;
            }

            nodesToRecover.push({
                parent: parentNode,
                child: node
            });
            parentNode.removeChild(node);

            nodesToRemove.push({
                parent: parentNode,
                child: canvas
            });

            parentNode.appendChild(canvas);
        });
        
        //將克隆節(jié)點(diǎn)動(dòng)態(tài)追加到body后面。
        $("body").append(cloneDom);

        html2canvas(cloneDom, {
            onrendered: function(canvas) {
                var url =canvas.toDataURL("image/png");
                window.location.href = url ;
                cloneDom.remove();    //清空克隆的內(nèi)容
             },
             background:"#fafafa"
        }); 
        
   } 
}

這里外面首先將要截取的div克隆一份，并將z-index設(shè)置為最小，避免引起界面的不美觀，然后是對(duì)svg進(jìn)行的處理，上面已經(jīng)分析過了，最后將克隆節(jié)點(diǎn)追加到body后面即可。

在onrendered中，我們可以直接使用location.href跳轉(zhuǎn)查看圖片，可以進(jìn)行保存操作，也可以將url寫入img的src中顯示在界面上，如 $('#imgId').attr('src',url);

最后可以在界面展示剛剛截取到的圖片：

五、上傳圖片保存到數(shù)據(jù)庫，并在界面中獲取該圖片顯示

現(xiàn)在得到url了，需要上傳到后端，并存到數(shù)據(jù)庫中，再另一個(gè)展示的界面中加載該圖片。我一般習(xí)慣于使用url來存儲(chǔ)圖片路徑，而不是用blob存儲(chǔ)。

因?yàn)樾枰诹硪粋€(gè)界面中獲取圖片，所以我把圖片存在了與webapp同級(jí)的一個(gè)resource目錄下，代碼如下：

//存儲(chǔ)圖片并返回圖片路徑
        BASE64Decoder decoder = new BASE64Decoder();
        byte[] b = decoder.decodeBuffer(product.getProPic().substring("data:image/png;base64,".length()));
        ByteArrayInputStream bais = new ByteArrayInputStream(b);
        BufferedImage bi1 = ImageIO.read(bais);
        String url = "user_resource" + File.separator + "img" + File.separator + "product_"+UUID.randomUUID().toString().replace("-", "")+".png";
        String totalUrl = System.getProperty("root") + url;
        File w2 = new File(totalUrl);
        ImageIO.write(bi1, "png", w2);
        
        product.setProPic(url);    //將圖片的相對(duì)路徑存儲(chǔ)到數(shù)據(jù)庫中
        
        int res = productMapper.insertSelective(product);    //添加到數(shù)據(jù)庫

這里因?yàn)樯婕暗狡渌壿嫞灾环乓徊糠执a。

這里使用的是BASE64Decoder來存儲(chǔ)圖片，我們獲取到圖片后，需要使用substring將“data:image/png;base64,”的內(nèi)容截取掉，因?yàn)椤埃焙竺娌攀菆D片的url， url.substring("data:image/png;base64,".length())。

對(duì)于路徑，上面代碼中的url是我存儲(chǔ)到數(shù)據(jù)庫中的內(nèi)容，而totalUrl就是實(shí)際進(jìn)行ImageIO的write操作時(shí)存儲(chǔ)的真實(shí)路徑，getProperty()方法獲取的項(xiàng)目的根目錄，可以在web.xml中配置如下內(nèi)容，然后 System.getProperty("root") 即可。

<!-- 配置系統(tǒng)獲得項(xiàng)目根目錄 -->
<context-param>
    <param-name>webAppRootKey</param-name>
    <param-value>root</param-value>
</context-param>
<listener>
    <listener-class>
        org.springframework.web.util.WebAppRootListener
    </listener-class>
</listener>

現(xiàn)在圖片的url就存到數(shù)據(jù)庫里了，而圖片本身就存儲(chǔ)在tomcat下該項(xiàng)目的這個(gè)目錄下。

最后外面在界面上獲取，只需要在當(dāng)前的url前面加上項(xiàng)目名即可< img class ="depot-img" src ="<%=request.getContextPath()%>/`+e.proPic+`" > 。

然后就可以看到界面上顯示的圖片了：

看完了這篇文章，相信你對(duì)“如何使用html2canvas.js實(shí)現(xiàn)頁面截圖并顯示或上傳”有了一定的了解，如果想了解更多相關(guān)知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝各位的閱讀！

網(wǎng)頁名稱：如何使用html2canvas.js實(shí)現(xiàn)頁面截圖并顯示或上傳-創(chuàng)新互聯(lián)
網(wǎng)頁網(wǎng)址：http://chinadenli.net/article46/dhsseg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)頁設(shè)計(jì)公司、手機(jī)網(wǎng)站建設(shè)、動(dòng)態(tài)網(wǎng)站、企業(yè)建站、自適應(yīng)網(wǎng)站、網(wǎng)站建設(shè)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)