新聞中心
javascript 網(wǎng)頁(yè)截圖 保存為本地圖片
可以做得到。注明:內(nèi)容非原創(chuàng)。學(xué)習(xí)javascript的時(shí)候覺(jué)得好就保存下來(lái)的文章:
10年積累的成都做網(wǎng)站、網(wǎng)站制作、成都外貿(mào)網(wǎng)站建設(shè)經(jīng)驗(yàn),可以快速應(yīng)對(duì)客戶(hù)對(duì)網(wǎng)站的新想法和需求。提供各種問(wèn)題對(duì)應(yīng)的解決方案。讓選擇我們的客戶(hù)得到更好、更有力的網(wǎng)絡(luò)服務(wù)。我雖然不認(rèn)識(shí)你,你也不認(rèn)識(shí)我。但先網(wǎng)站制作后付款的網(wǎng)站建設(shè)流程,更有龍里免費(fèi)網(wǎng)站建設(shè)讓你可以放心的選擇與我們合作。
html2canvas是一個(gè)相當(dāng)不錯(cuò)的JavaScript類(lèi)庫(kù),它使用了html5和css3的一些新功能特性,實(shí)現(xiàn)了在客戶(hù)端對(duì)網(wǎng)頁(yè)進(jìn)行截圖的功
能。html2canvas通過(guò)獲取頁(yè)面的DOM和元素的樣式信息,并將其渲染成canvas圖片,從而實(shí)現(xiàn)給頁(yè)面截圖的功能。
它不需要來(lái)自服務(wù)器任何渲染,整張圖片都是在客戶(hù)端瀏覽器創(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è)插件依賴(lài)于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è)截圖
本文地址:
原文鏈接:
javascript是什么意思
JavaScript是Web開(kāi)發(fā)領(lǐng)域中的一種功能強(qiáng)大的編程語(yǔ)言,主要用于開(kāi)發(fā)交互式的Web頁(yè)面。在計(jì)算機(jī)、手機(jī)等設(shè)備上瀏覽的網(wǎng)頁(yè),其大多數(shù)的交互邏輯幾乎都是由JavaScript實(shí)現(xiàn)的。對(duì)于制作一個(gè)網(wǎng)頁(yè)而言,HTML、CSS和JavaScript分別代表了結(jié)構(gòu)、樣式和行為,結(jié)構(gòu)是網(wǎng)頁(yè)的骨架,樣式是網(wǎng)頁(yè)的外觀,行為是網(wǎng)頁(yè)的交互邏輯,比較HTML、CSS和JavaScript:千鋒官網(wǎng)每日更新最新軟件開(kāi)發(fā)基礎(chǔ)知識(shí)內(nèi)容,鞏固日常學(xué)習(xí)中的基礎(chǔ)技能。更有免費(fèi)的軟件開(kāi)發(fā)視頻教程幫助學(xué)員快速學(xué)習(xí)。千鋒教育就有線(xiàn)上免費(fèi)的軟件開(kāi)發(fā)公開(kāi)課,。
JavaScript內(nèi)嵌于HTML網(wǎng)頁(yè)中,通過(guò)瀏覽器內(nèi)置的JavaScript引擎進(jìn)行解釋執(zhí)行,把一個(gè)原本只用來(lái)顯示的頁(yè)面轉(zhuǎn)變成支持用戶(hù)交互的頁(yè)面程序。瀏覽器是訪(fǎng)問(wèn)互聯(lián)網(wǎng)中各種網(wǎng)站所必備的工具,JavaScript主要就是運(yùn)行在瀏覽器中的,以下列舉了幾種常見(jiàn)的瀏覽器及其特點(diǎn)。千鋒教育集團(tuán)目前已與國(guó)內(nèi)4000多家企業(yè)建立人才輸送合作,與500多所大學(xué)建立實(shí)訓(xùn)就業(yè)合作,每年為各大企業(yè)輸送上萬(wàn)名移動(dòng)開(kāi)發(fā)工程師,每年有數(shù)十萬(wàn)名學(xué)員受益于千鋒教育組織的技術(shù)研討會(huì)、技術(shù)培訓(xùn)課、網(wǎng)絡(luò)公開(kāi)課及免費(fèi)教學(xué)視頻。
關(guān)于JavaScript 學(xué)習(xí),有哪些好的博客或者網(wǎng)站推薦
你好,重慶君勝任網(wǎng)絡(luò)為你解答:
學(xué)習(xí)前端js推薦以下幾個(gè)網(wǎng)站:
1、d8jd.com
2、runoob.com/
3、w3school.com.cn
javascript能在服務(wù)端執(zhí)行嗎
可以,javascript是一種語(yǔ)言,所以只要是有js的解析環(huán)境別管是服務(wù)器還是客戶(hù)端,甚至嵌入式板子上都是可以的。
目前比較出名的nodejs,就是使用libevent + v8 的組合,v8是google開(kāi)源的一個(gè)js引擎,除了v8還有很多,例如火狐的Gecko等等。
所以服務(wù)器執(zhí)行js是可以的,并且這幾年火得一塌糊涂,如果想了解更多可以搜素nodejs相關(guān)的知識(shí)。官網(wǎng)地址:
文章題目:javascript管網(wǎng),js 管道
網(wǎng)站URL:http://fisionsoft.com.cn/article/dscoijs.html