有的頁面因為限制不能截屏怎么辦？

方法/步驟

創(chuàng)新互聯(lián)堅持“要么做到，要么別承諾”的工作理念，服務領域包括：成都網(wǎng)站制作、網(wǎng)站設計、企業(yè)官網(wǎng)、英文網(wǎng)站、手機端網(wǎng)站、網(wǎng)站推廣等服務，滿足客戶于互聯(lián)網(wǎng)時代的劍閣網(wǎng)站設計、移動媒體設計的需求，幫助企業(yè)找到有效的互聯(lián)網(wǎng)解決方案。努力成為您成熟可靠的網(wǎng)絡建設合作伙伴！

如下圖所示，在應用密碼輸入界面，是不允許截屏的；

返回手機桌面，點擊設置；

進入智能輔助界面，點擊手勢控制；

頁面跳轉(zhuǎn)，點擊智能截屏；

把智能截屏功能點開，也就是把智能截屏功能開啟；

返回的應用界面，先用指關(guān)節(jié)敲一下屏幕，然后快速畫出一個圓圈；

之后就會彈出一個正方形，拉動正方形右下角調(diào)整需要截屏的面積；

如果需要截全屏，把正方形面積拉動到整個頁面，最后點擊保存；

這樣一張完整的截屏就保存成功，也間接的把截屏限制給解除了。

總結(jié)：

1、點擊設置→智能輔助→手勢控制→智能截屏；

2、把智能截屏功能開啟→指關(guān)節(jié)敲擊屏幕畫圈；

3、拉動正方形調(diào)整面積→最后，點擊保存即可。

jq怎么點擊按鈕截圖保存

首先創(chuàng)建一個html文件，然后在body下創(chuàng)建一個div，該div下只有一個button和一個img，然后通過style的標簽來添加css的樣式，這個css主要是用來定義div的顯示效果。比如寬、高、居中等。此時通過瀏覽器運行html可以看到如下的效果。外觀上已經(jīng)實現(xiàn)，但是因為沒有添加js或者jquery，所以沒有點擊按鈕沒有效果。接下來我們通過script標簽中的src屬性來引入jquery庫文件，因為是jquery本身就是一個封裝的js,所以是用javascript的引入方式。

java截屏有哪幾種方法

前臺方式

1. 利用html2canvas實現(xiàn)前臺截屏

html2canvas項目的gitHub地址

html2canvas示例

html2canvas可以將HTML代碼塊進行截取，并生成快照形式的canvas，然后可以利用html5的下載功能提供圖片的下載接口，供用戶下載。

優(yōu)點：前臺技術(shù)，實現(xiàn)比較容易。

缺點：此項目使用了html5的技術(shù)，因此在對IE的兼容上，只可以在IE9+的版本上使用。

使用時，需要引用jQuery.js和html2canvas.js。（html2canvas.js可以在github上下載）

具體JavaScript代碼如下:

var canvas = function () {

html2canvas($("#chart"), {

onrendered: function (canvas) {

$("#class11").html(canvas);//將id為“class11”部分的代碼轉(zhuǎn)換為canvas

var type = 'png';//圖片類型為png

var imgData = canvas.toDataURL('png');//將圖片轉(zhuǎn)換為png類型的流

var _fixType = function (type) {

type = type.toLowerCase().replace(/jpg/i, 'jpeg'); var r = type.match(/png|jpeg|bmp|gif/)[0]; return 'image/' + r;

}; var saveFile = function (data, filename) {

var save_link = document.createElementNS('', 'a');

save_link.href = data;

save_link.download = filename; var event = document.createEvent('MouseEvents');

event.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);

save_link.dispatchEvent(event);

}; //下載時的文件名

var filename = 'baidufe_' + (new Date()).getTime() + '.' + type; // 下載文件

saveFile(imgData, filename);

}

});

后臺方式（java）

1. 利用html2image實現(xiàn)

html2image的地址（google）

html2image是可以識別html標簽并將html轉(zhuǎn)換成圖片的java項目。

優(yōu)點：后臺轉(zhuǎn)換，故對瀏覽器的版本基本沒有要求。

缺點：對樣式的識別不是很好，轉(zhuǎn)換出來的圖片比較簡單，基本沒有可以兼容的樣式。

使用方式：maven中引用如下依賴：

dependency

groupIdcom.github.xuwei-k/groupId

artifactIdhtml2image/artifactId

version0.1.0/version/dependency12345

2. 利用DJNativeSwing項目實現(xiàn)

純java代碼實現(xiàn)。使用DJNativeSwing這個項目，構(gòu)建一個swing瀏覽器，打開網(wǎng)址，之后截取圖片。（需要eclipse的swt庫支持）

優(yōu)點：純java實現(xiàn)。

缺點：需要多線程的支持，只在控制臺方式實現(xiàn)過（由于本人對于多線程的掌握較弱，目前沒有在spring項目中實現(xiàn)這個方法，求大神指導~~）

3. 利用phantomJs實現(xiàn)

phantomJs的GitHub地址

phantomJs官網(wǎng)

phantom利用的是webKit內(nèi)核，全面支持web而不需瀏覽器支持，快速，原生支持各種Web標準。

優(yōu)點：速度快，使用簡單。

缺點：需要在項目的服務器端引用exe文件進行截圖，并發(fā)性能有待考證。

如何用 js 做網(wǎng)站截圖

有個庫?html2canvas.js，這個很多人用。

官網(wǎng)示例：

HTML

div?id="capture"?style="padding:?10px;?background:?#f5da55"

h4?style="color:?#000;?"Hello?world!/h4/div

JavaScript

html2canvas(document.querySelector("#capture")).then(canvas?=?{

document.body.appendChild(canvas)});

javascript 網(wǎng)頁截圖 保存為本地圖片

可以做得到。注明：內(nèi)容非原創(chuàng)。學習javascript的時候覺得好就保存下來的文章：

html2canvas是一個相當不錯的JavaScript類庫，它使用了html5和css3的一些新功能特性，實現(xiàn)了在客戶端對網(wǎng)頁進行截圖的功

能。html2canvas通過獲取頁面的DOM和元素的樣式信息，并將其渲染成canvas圖片，從而實現(xiàn)給頁面截圖的功能。

它不需要來自服務器任何渲染，整張圖片都是在客戶端瀏覽器創(chuàng)建。當瀏覽器不支持Canvas時，將采用Flashcanvas或

ExplorerCanvas技術(shù)代替實現(xiàn)。以下瀏覽器能夠很好的支持該腳本：Firefox 3.5+, Google Chrome,

Opera新的版本, IE9以上的瀏覽器。

因為每個瀏覽器渲染頁面的方式都不盡相同，所以生成的圖片也不太一樣。雖然它目前還是處理開發(fā)階段，但還是很值得期待的。

這個插件依賴于jQuery插件，建議使用最新版的。

兼容性

html2canvas能在以下的瀏覽器中完美的運行。

- Firefox 3.5+

- Chrome

- Opera

- IE9使用方法

1、引入文件

首先我們需要引入jQuery庫和html2canvas插件文件，注意html2canvas插件文件一定要在jQuery的后面引入，不然會報錯。

script type="text/javascript"

src=""/script

script type="text/javascript"

src=""/script

2、調(diào)用插件

通過html2canvas方法調(diào)用插件，該方法接受兩個參數(shù)，第一個為要生成截圖的DOM元素，第二個參數(shù)為插件的配置

html2canvas(document.body,?{?allowTaint:?true,?taintTest:?false,

onrendered:?function(canvas)?{?canvas.id?=?"mycanvas";

//document.body.appendChild(canvas);?//生成base64圖片數(shù)據(jù)?var?dataUrl?=

canvas.toDataURL();?var?newImg?=?document.createElement("img");

newImg.src?=?dataUrl;?document.body.appendChild(newImg);?}?});

通過一個回調(diào)函數(shù)來處理獲取到的截圖。

圖片跨域問題

在網(wǎng)頁的圖片中，如果有跨域圖片，調(diào)用toDataURL的時候會出錯

SecurityError: The operation is insecure.

解決方法是在跨域的服務器上設置header設置為允許跨域請求

access-control-allow-origin: *? access-control-allow-credentials: true

官網(wǎng)主頁:

本站文章除注明轉(zhuǎn)載外，均為本站原創(chuàng)或翻譯，歡迎任何形式的轉(zhuǎn)載，但請務必注明出處，尊重他人勞動共創(chuàng)和諧網(wǎng)絡環(huán)境。

轉(zhuǎn)載請注明：文章轉(zhuǎn)載自：問說 ? html2canvas根據(jù)DOM元素樣式實現(xiàn)網(wǎng)頁截圖

本文標題：html2canvas根據(jù)DOM元素樣式實現(xiàn)網(wǎng)頁截圖

本文地址：

原文鏈接：