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

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

成都創(chuàng)新互聯(lián)公司主要為客戶提供服務(wù)項(xiàng)目涵蓋了網(wǎng)頁(yè)視覺(jué)設(shè)計(jì)、VI標(biāo)志設(shè)計(jì)、成都全網(wǎng)營(yíng)銷、網(wǎng)站程序開(kāi)發(fā)、HTML5響應(yīng)式網(wǎng)站建設(shè)公司、手機(jī)網(wǎng)站開(kāi)發(fā)、微商城、網(wǎng)站托管及網(wǎng)站建設(shè)維護(hù)、WEB系統(tǒng)開(kāi)發(fā)、域名注冊(cè)、國(guó)內(nèi)外服務(wù)器租用、視頻、平面設(shè)計(jì)、SEO優(yōu)化排名。設(shè)計(jì)、前端、后端三個(gè)建站步驟的完善服務(wù)體系。一人跟蹤測(cè)試的建站服務(wù)標(biāo)準(zhǔn)。已經(jīng)為成都木包裝箱行業(yè)客戶提供了網(wǎng)站營(yíng)銷推廣服務(wù)。

html2canvas是一個(gè)相當(dāng)不錯(cuò)的JavaScript類庫(kù)，它使用了html5和css3的一些新功能特性，實(shí)現(xiàn)了在客戶端對(duì)網(wǎng)頁(yè)進(jìn)行截圖的功

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

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

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

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

因?yàn)槊總€(gè)瀏覽器渲染頁(yè)面的方式都不盡相同，所以生成的圖片也不太一樣。雖然它目前還是處理開(kāi)發(fā)階段，但還是很值得期待的。

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

兼容性

html2canvas能在以下的瀏覽器中完美的運(yùn)行。

- Firefox 3.5+

- Chrome

- Opera

- IE9使用方法

1、引入文件

首先我們需要引入jQuery庫(kù)和html2canvas插件文件，注意html2canvas插件文件一定要在jQuery的后面引入，不然會(huì)報(bào)錯(cuò)。

script type="text/javascript"

src=""/script

script type="text/javascript"

src=""/script

2、調(diào)用插件

通過(guò)html2canvas方法調(diào)用插件，該方法接受兩個(gè)參數(shù)，第一個(gè)為要生成截圖的DOM元素，第二個(gè)參數(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);?}?});

通過(guò)一個(gè)回調(diào)函數(shù)來(lái)處理獲取到的截圖。

圖片跨域問(wèn)題

在網(wǎng)頁(yè)的圖片中，如果有跨域圖片，調(diào)用toDataURL的時(shí)候會(huì)出錯(cuò)

SecurityError: The operation is insecure.

解決方法是在跨域的服務(wù)器上設(shè)置header設(shè)置為允許跨域請(qǐng)求

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

官網(wǎng)主頁(yè):

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

轉(zhuǎn)載請(qǐng)注明：文章轉(zhuǎn)載自：?jiǎn)栒f(shuō) ? html2canvas根據(jù)DOM元素樣式實(shí)現(xiàn)網(wǎng)頁(yè)截圖

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

本文地址：

原文鏈接：

jq怎么點(diǎn)擊按鈕截圖保存

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

jquery 截取DIV中的部分內(nèi)容

jQuery 獲取 div 之間的內(nèi)容，有兩種方法，$(selector).text()、$(selector).html() 。

html：

div

ptest/p

/div

$("div").text() 得到的是 test，是 div 的純文本，會(huì)自動(dòng)忽略 html 標(biāo)簽 。

$("div").html() 得到的是 ptest/p，是 div 的所有內(nèi)容，包括 html 標(biāo)簽，它有個(gè)好處是可以將 得到的標(biāo)簽與文字 直接再利用，比如添加到頁(yè)面其他地方之類的操作 。

js或jquery怎么實(shí)現(xiàn)禁用頁(yè)面截屏等

示例如下：

input id="btnShow" type="button" value="點(diǎn)擊" class="btn"

上面是一段按鈕的html代碼

如果要用原生的js來(lái)禁用這個(gè)按鈕

可以用這樣：

document.getElementByIdx_x_x("btnShow").disabled=true;（這樣就把按鈕禁用了）

如果要重新開(kāi)啟按鈕，則可以讓disabled=false;即可

那么在jquery下面要如何設(shè)置呢？其實(shí)也很簡(jiǎn)單

利用jquery的attr的方法即可

$("#btnShow").attr({"disabled":"disabled"});

如要讓按鈕恢復(fù)可用，可以采用removeAttr方法把disabled屬性刪除即可。

$("#btnShow").removeAttr("disabled");

jQuery，croppic（用戶截圖后上傳功能）的使用方法

它是前臺(tái)剪切后，發(fā)回剪切的圖片數(shù)據(jù)到后臺(tái)，然后后臺(tái)將該數(shù)據(jù)保存為圖片，并生成一條引用鏈接給前臺(tái)就行了。