快捷導(dǎo)航

Javascript保存網(wǎng)頁(yè)為圖片借助于html2canvas庫(kù)實(shí)現(xiàn)

更新時(shí)間：2014年09月05日 09:44:47 投稿：whsnow

借助于html2canvas庫(kù)，把網(wǎng)頁(yè)保存為Canvas畫布，再把生成的canvas保存成圖片，下面的示例，大家可以看看

第一步，把網(wǎng)頁(yè)保存為Canvas畫布，借助于html2canvas庫(kù)，http://html2canvas.hertzen.com/

html2canvas(document.getElementById("id1"), { 
onrendered: function(canvas) { 
document.getElementById("id2").appendChild(canvas);//生成畫布后如何處理，當(dāng)然可以在新標(biāo)簽打開，在浮層展示等等 
}, 
canvas_id: 'canvas'//通過修改html2canvas源碼添加canvas的id 
});

Note:html2canvas()第一個(gè)參數(shù)為要生成canvas的區(qū)域，如果整個(gè)網(wǎng)頁(yè)生成canvas，則是document.body。第二個(gè)參數(shù)詳見官網(wǎng)設(shè)置canvas的各種屬性，當(dāng)然修改源代碼可以添加自己想要的屬性，如給canvas添加id等。

第二步，把第一步中生成的canvas保存成圖片

var canvas = document.getElementById("<span style="font-family: Arial, Helvetica, sans-serif;">canvas"</span><span style="font-family: Arial, Helvetica, sans-serif;">),</span> 
url = canvas.toDataURL();// 
//以下代碼為下載此圖片功能 
var triggerDownload = $("<a>").attr("href", url).attr("download", "img.png").appendTo("body"); 
triggerDownload[0].click(); 
triggerDownload.remove();

這里關(guān)注toDataURL()方法即可，可以把canvas轉(zhuǎn)化成data形式的圖片url，把這個(gè)url賦給<img/>標(biāo)簽即可顯示圖片，代碼中其他部分為自己需要的下載功能。

您可能感興趣的文章:

相關(guān)文章

JavaScript實(shí)現(xiàn)可拖拽的進(jìn)度條
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)可拖拽的進(jìn)度條，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2021-05-05
QT與javascript交互數(shù)據(jù)的實(shí)現(xiàn)
本文主要介紹了QT與javascript交互數(shù)據(jù)的實(shí)現(xiàn)，主要包括數(shù)據(jù)從QT流向JS以及數(shù)據(jù)從JS流向QT的幾種方法，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2021-05-05
webpack3之loader全解析
這篇文章主要介紹了webpack3之loader全解析，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2017-10-10
微信小程序彈窗組件使用詳解
這篇文章主要為大家詳細(xì)介紹了微信小程序彈窗組件的使用方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2022-07-07
JS獲取當(dāng)前日期和時(shí)間的簡(jiǎn)單實(shí)例
這篇文章主要介紹了JS獲取當(dāng)前日期和時(shí)間的簡(jiǎn)單實(shí)例，有需要的朋友可以參考一下
2013-11-11
Next.js項(xiàng)目實(shí)戰(zhàn)踩坑指南(筆記)
這篇文章主要介紹了Next.js項(xiàng)目實(shí)戰(zhàn)踩坑指南(小結(jié))，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2018-11-11
寫gulp遇到的ES6問題詳解
這篇文章主要給大家介紹了關(guān)于在寫gulp遇到的ES6問題的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2018-12-12
js 數(shù)組去重的四種實(shí)用方法
怎樣去掉Javascript的Array的重復(fù)項(xiàng)，這個(gè)問題看起來簡(jiǎn)單，但考的不僅僅是實(shí)現(xiàn)這個(gè)功能，更能看出你對(duì)計(jì)算機(jī)程序執(zhí)行的深入理解
2014-09-09
JavaScript中var、let和const的用法及區(qū)別詳解
在JavaScript中l(wèi)et和const是用于聲明變量的關(guān)鍵字,并且它們相較于var具有更加靈活和安全的特性,這篇文章主要介紹了JavaScript中var、let和const的用法及區(qū)別的相關(guān)資料,需要的朋友可以參考下
2025-04-04
JS+CSS實(shí)現(xiàn)滾動(dòng)數(shù)字時(shí)鐘效果
本篇文章教給大家用JS代碼配合CSS樣式來實(shí)現(xiàn)滾動(dòng)時(shí)鐘的動(dòng)畫效果，一起來學(xué)習(xí)下。
2017-12-12