|
|
|
|
|
|
贊助商
分類(lèi)目錄
贊助商
最新文章
搜索
【JQuery插件】把網(wǎng)頁(yè)或某div或table表格內(nèi)容轉(zhuǎn)為圖片并下載
作者:admin 時(shí)間:2019-3-7 7:54:8 瀏覽:今天介紹一個(gè)非常好用的JQuery插件，它可以把網(wǎng)頁(yè)或某個(gè)div或table表格內(nèi)容轉(zhuǎn)為圖片并下載保存。這個(gè)插件叫 html2canvas ，它只有一個(gè)js文件 html2canvas.js ，而使用起來(lái)也非常簡(jiǎn)單。
先看一個(gè)實(shí)例html代碼，后面再介紹如何使用。
<html>
<head>
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="html2canvas.js"></script>
</head>
<body>
<div id="html-content-holder" style="background-color: #F0F0F1; color: #00cc65; width: 500px; padding-left: 25px; padding-top: 10px;padding-right: 25px;padding-bottom: 15px;margin-bottom:15px;">
<strong>卡卡網(wǎng) WebKaka.com</strong><hr/>
<h3 style="color: #3e4b51;">
Html轉(zhuǎn)換為圖片
</h3>
<p style="color: #3e4b51;">
<b>卡卡網(wǎng) WebKaka.com</b> 旨在為廣大網(wǎng)站建設(shè)人員提供專(zhuān)業(yè)的網(wǎng)站測(cè)速和優(yōu)化服務(wù)，以及為廣大網(wǎng)民提供網(wǎng)絡(luò)速度測(cè)試服務(wù)。
</p>
<p style="color: #3e4b51;">
<b>html2canvas</b> 腳本可以直接在用戶(hù)瀏覽器上用來(lái)對(duì)網(wǎng)頁(yè)或其一部分內(nèi)容進(jìn)行截圖，截圖是基于DOM的，因此可能不完全準(zhǔn)確。
</p>
</div>
<input id="btn-Preview-Image" type="button" value="預(yù) 覽"/>
<a id="btn-Convert-Html2Image" href="#">下載</a>
<br/>
<h3>預(yù) 覽 :</h3>
<div id="previewImage"></div>
<script>
$(document).ready(function(){
var element = $("#html-content-holder"); // global variable
var getCanvas; // global variable
$("#btn-Preview-Image").on('click', function () {
html2canvas(element, {
onrendered: function (canvas) {
$("#previewImage").append(canvas);
getCanvas = canvas;
}
});
});
$("#btn-Convert-Html2Image").on('click', function () {
var imgageData = getCanvas.toDataURL("image/png");
// Now browser starts downloading it instead of just showing it
var newData = imgageData.replace(/^data:image\/png/, "data:application/octet-stream");
$("#btn-Convert-Html2Image").attr("download", "your_pic_name.png").attr("href", newData);
});
});
</script>
</body>
</html>
下面介紹如何使用該插件，主要有三步。
第一步：調(diào)用jquery庫(kù)文件和html2canvas.js文件
jquery庫(kù)文件可以調(diào)用百度公共庫(kù)的文件，而html2canvas.js文件需要下載到本地來(lái)調(diào)用，本文后面會(huì)附上下載地址。
代碼如下：
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="html2canvas.js"></script>
第二步：預(yù)覽和下載的html代碼
點(diǎn)擊“預(yù)覽”可看到生成的圖片，點(diǎn)擊“下載”可把圖片下載保存起來(lái)。
代碼如下：
<input id="btn-Preview-Image" type="button" value="預(yù) 覽"/>
<a id="btn-Convert-Html2Image" href="#">下載</a>
<br/>
<h3>預(yù) 覽 :</h3>
<div id="previewImage">
</div>
第三部：生成和下載圖片的JQuery實(shí)現(xiàn)代碼
代碼如下：
<script>
$(document).ready(function(){
//這是要轉(zhuǎn)成圖片的div id
var element = $("#html-content-holder");
var getCanvas;
//這是預(yù)覽按鈕的id
$("#btn-Preview-Image").on('click', function () {
html2canvas(element, {
onrendered: function (canvas) {
//這是顯示預(yù)覽圖的id
$("#previewImage").append(canvas);
getCanvas = canvas;
}
});
});
//這是下載圖片的id
$("#btn-Convert-Html2Image").on('click', function () {
var imgageData = getCanvas.toDataURL("image/png");
// Now browser starts downloading it instead of just showing it
var newData = imgageData.replace(/^data:image\/png/, "data:application/octet-stream");
$("#btn-Convert-Html2Image").attr("download", "your_pic_name.png").attr("href", newData);
});
});
</script>
編寫(xiě)代碼的時(shí)候，只需把jquery實(shí)現(xiàn)代碼的各個(gè)id名稱(chēng)與html代碼里的各個(gè)id對(duì)應(yīng)一致就行了。
插件下載
html2canvas.js文件下載。
鏈接: https://pan.baidu.com/s/1FDy5wz67Y_DZGSoRbqd-Zg
提取碼: ks6r
標(biāo)簽: html2canvas html2image div image table
- 站長(zhǎng)推薦
