Javascript如何實現(xiàn)網(wǎng)頁截屏

Javascript如何實現(xiàn)網(wǎng)頁截屏？這篇文章運(yùn)用了實例代碼展示，代碼非常詳細(xì)，感興趣的小伙伴們可以參考借鑒，希望對大家能有所幫助。

目前成都創(chuàng)新互聯(lián)已為上千的企業(yè)提供了網(wǎng)站建設(shè)、域名、網(wǎng)絡(luò)空間、成都網(wǎng)站托管、企業(yè)網(wǎng)站設(shè)計、杭錦網(wǎng)站維護(hù)等服務(wù)，公司將堅持客戶導(dǎo)向、應(yīng)用為本的策略，正道將秉承"和諧、參與、激情"的文化，與客戶和合作伙伴齊心協(xié)力一起成長，共同發(fā)展。

技術(shù)路線很清晰，將網(wǎng)頁的某個區(qū)域的內(nèi)容生成圖像，保持到canvas里，然后將canvas內(nèi)容轉(zhuǎn)換成圖片，保存到本地，最后上傳到微博。

我在網(wǎng)上搜尋到html2canvas這個能將指定網(wǎng)頁元素內(nèi)容生成canvas圖像的javascript工具。這個js工具的用法很簡單，你只需要將它的js文件引入到頁面里，然后調(diào)用html2canvas()函數(shù)：

html2canvas(document.body, {
    onrendered: function(canvas) {
        /* canvas is the actual canvas element,
           to append it to the page call for example
           document.body.appendChild( canvas );
        */
    }
});

這個html2canvas()函數(shù)有個參數(shù)，上面的例子里傳入的參數(shù)是document.body，這會截取整個頁面的圖像。如果你想只截取一個區(qū)域，比如對某個p或某個table截圖，你就將這個p或某個table當(dāng)做參數(shù)傳進(jìn)去。

我最終并沒有選用html2canvas這個js工具，因為在我的實驗過程中發(fā)現(xiàn)它有幾個問題。

首先，跨域問題。我舉個例子說明這個問題，比如我的網(wǎng)頁網(wǎng)址是http://www.webhek.com/about/，而我在這個頁面上有個張圖片，這個圖片并不是來自www.webhek.com域，而是來自cdn圖片服務(wù)器www.webhek-cdn.com/images/about.jpg，那么，這張圖片就和這個網(wǎng)頁不是同域，那么html2canvas就無法對這種圖片進(jìn)行截圖，如果你的網(wǎng)站的所有圖片都放在單獨(dú)的圖片服務(wù)器上，那么用html2canvas對整個網(wǎng)頁進(jìn)行截圖是就會發(fā)現(xiàn)所有圖片的地方都是空白。

這個問題也有補(bǔ)救的方法，就是用代理：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>html2canvas php proxy</title>
        <script src="html2canvas.js"></script>
        <script>
        //<![CDATA[
        (function() {
            window.onload = function(){
                html2canvas(document.body, {
                    "logging": true, //Enable log (use Web Console for get Errors and Warnings)
                    "proxy":"html2canvasproxy.php",
                    "onrendered": function(canvas) {
                        var img = new Image();
                        img.onload = function() {
                            img.onload = null;
                            document.body.appendChild(img);
                        };
                        img.onerror = function() {
                            img.onerror = null;
                            if(window.console.log) {
                                window.console.log("Not loaded image from canvas.toDataURL");
                            } else {
                                alert("Not loaded image from canvas.toDataURL");
                            }
                        };
                        img.src = canvas.toDataURL("image/png");
                    }
                });
            };
        })();
        //]]>
        </script>
    </head>
    <body>
        <p>
            <img alt="google maps static" src="http://maps.googleapis.com/maps/api/staticmap?center=40.714728,-73.998672&zoom=12&size=800x600&maptype=roadmap&sensor=false">
        </p>
    </body>
</html>

這個方法只能用在你自己的服務(wù)器里，如果是對別人的網(wǎng)頁截圖，還是不行。

試驗的過程中還發(fā)現(xiàn)用html2canvas截屏出來的圖像有時會出現(xiàn)文字重疊的現(xiàn)象。我估計是因為html2canvas在解析頁面內(nèi)容、處理css時不是很完美的原因。

最后，我在火狐瀏覽器的官方網(wǎng)站上找到了drawWindow()這個方法，這個方法和上面提到html2canvas不同之處在于，它不分析頁面元素，它只針對區(qū)域，也就是說，它接受的參數(shù)是四個數(shù)字標(biāo)志的區(qū)域，不論這個區(qū)域中什么地方，有沒有頁面內(nèi)容。

void drawWindow(
  in nsIDOMWindow window,
  in float x, 
  in float y,
  in float w,
  in float h,
  in DOMString bgColor,
  in unsigned long flags [optional]
);

這個原生的JavaScript方法看起來非常的完美，正是我需要的，但這個方法不能使用在普通網(wǎng)頁中，因為火狐官方發(fā)現(xiàn)這個方法會引起有安全漏洞，在這個bug修復(fù)之前，只有具有“Chrome privileges”的代碼才能使用這個drawWindow()函數(shù)。

雖然有很大的限制，但周折一下還是可以用的，在我開發(fā)的火狐addon插件中，main.js就是具有“Chrome privileges”的代碼。我在網(wǎng)上發(fā)現(xiàn)了一段火狐插件SDK里自帶代碼樣例：

var window = require('window/utils').getMostRecentBrowserWindow();
var tab = require('tabs/utils').getActiveTab(window);
var thumbnail = window.document.createElementNS("http://www.w3.org/1999/xhtml", "canvas");
thumbnail.mozOpaque = true;
window = tab.linkedBrowser.contentWindow;
thumbnail.width = Math.ceil(window.screen.availWidth / 5.75);
var aspectRatio = 0.5625; // 16:9
thumbnail.height = Math.round(thumbnail.width * aspectRatio);
var ctx = thumbnail.getContext("2d");
var snippetWidth = window.innerWidth * .6;
var scale = thumbnail.width / snippetWidth;
ctx.scale(scale, scale);
ctx.drawWindow(window, window.scrollX, window.scrollY, snippetWidth, snippetWidth * aspectRatio, "rgb(255,255,255)");
// thumbnail now represents a thumbnail of the tab

這段代碼寫的非常清楚，只需要依據(jù)它做稍微的修改就能適應(yīng)自己的需求。

到此為止, 關(guān)于Javascript實現(xiàn)網(wǎng)頁截屏的方法有了一個基礎(chǔ)的認(rèn)識, 但是對于具體的使用方法還是需要多加鞏固和練習(xí)，如果想了解更多相關(guān)內(nèi)容，請關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊。

分享標(biāo)題：Javascript如何實現(xiàn)網(wǎng)頁截屏
標(biāo)題網(wǎng)址：http://www.rwnh.cn/article14/jgpede.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站內(nèi)鏈、品牌網(wǎng)站建設(shè)、靜態(tài)網(wǎng)站、關(guān)鍵詞優(yōu)化、、Google

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

猜你還喜歡下面的內(nèi)容

中文字幕日韩精品一区二区免费_精品一区二区三区国产精品无卡在_国精品无码专区一区二区三区_国产αv三级中文在线

Javascript如何實現(xiàn)網(wǎng)頁截屏