溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》
您好，登錄后才能下訂單哦！
Javascript如何實現(xiàn)網(wǎng)頁截屏？這篇文章運用了實例代碼展示，代碼非常詳細(xì)，感興趣的小伙伴們可以參考借鑒，希望對大家能有所幫助。
技術(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)站的所有圖片都放在單獨的圖片服務(wù)器上，那么用html2canvas對整個網(wǎng)頁進(jìn)行截圖是就會發(fā)現(xiàn)所有圖片的地方都是空白。
這個問題也有補救的方法，就是用代理：
<!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)注億速云行業(yè)資訊。
免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權(quán)內(nèi)容。
億速云公眾號
手機網(wǎng)站二維碼