最近由于公司業務要求,需要完成一個一鍵生成照片海報的功能,功能的核心是把HTML代碼展現的內容轉化為png或者jpg圖片。接到這個任務的時候,我心里是一臉懵逼的,于是就上谷歌搜索插件,還真有一款名叫html2canvas的插件,我心想看來這任務還是挺簡單的,那開始吧!
html2canvas
運行腳本,可以直接在用戶瀏覽器上拍攝網頁或其部分的“截圖”。截圖是基于DOM,因此并不是100%準確的真實表示,因為它是實際的截圖,而是根據頁面上可用的信息構建截圖。(引用自html2canvas官網)
入門
html2canvas的簡單調用:
// element是需要截圖的元素
html2canvas(element,options);
可用選項(options)
參數名稱 | 類型 | 默認值 | 描述 |
---|---|---|---|
allowTaint | boolean | false | 允許跨域 |
useCORS | boolean | false | 貌似與跨域有關,但和allowTaint不能共存 |
proxy | string | undefined | 代理地址 |
taintTest | boolean | true | 是否在渲染前測試圖片 |
timeout | number | 0 | 圖片加載延遲,默認延遲為0,單位毫秒 |
logging | boolean | false | 在Console中輸出信息 |
width | number | null | canvas的寬度設定 |
height | number | null | canvas的高度設定 |
background | string | #fff | canvas的背景顏色(未指定則為透明) |
letterRendering | boolean | false | 在設置了字間距的時候有用 |
特別的是,html2canvas提供了回調事件--onrendered來渲染canvas:
html2canvas(element,{
onrendered:function(canvas){
// canvas是最終渲染的<canvas>元素
}
});
我想有這些已經足夠了吧,于是寫下了這樣的代碼:
// vue.js
// html
<div class="box">

</div>
<button @cllick="doShot">截圖</button>
// js
doShot () {
const w = $('.box').outerWidth(),
h = $('.box').outerHeight();
html2canvas($(".box"), {
allowTaint: true,
taintTest: false,
width: w,
height: h,
onrendered: function(canvas) {
var dataUrl = canvas.toDataURL("image/png", 1.0),
newImg = document.createElement("img");
newImg.src = dataUrl;
$('.box').empty().append(newImg);
newImg.style.width = '100%';
}
});
}
在chrome開發者工具中截圖效果還不錯,孰知在移動設備--iphone6中測試的時候竟然是這般模樣:
從圖中的英文字母可以看出,圖中的像素發生了偏移,給人的視覺感受是圖片變模糊了,這可咋辦呀!于是我又一次借助萬能的google去尋求答案,但是答案大同小異,如下圖:
但是,并沒有什么作用,就在我萬念俱灰的時候,在原作者的git上看到了#1087 自定義分辨率
的解決方法,作者在html2canvas的源碼中添加了兩個參數,分別為scale和dpi,scale是比例,辣么dpi是個什么玩意兒,以下是百度百科對dpi的定義:
DPI是指每英寸的像素,也就是掃描精度。DPI越低,掃描的清晰度越低,由于受網絡傳輸速度的影響,web上使用的圖片都是72dpi,但是沖洗照片不能使用這個參數,必須是300dpi或者更高350dpi。例如要沖洗46英寸的照片,掃描精度必須是300dpi,那么文件尺寸應該是(4300)(6300)=1200像素*1800像素。
好啦,到這里我們應該知道,只要增大dpi或者scale肯定能使同樣寬高的圖像變得清晰,那么模糊的問題也就不存在了。
參數用法介紹:
參數名稱 | 類型 | 默認值 | 描述 |
---|---|---|---|
scale | number | 1 | 按比例增加分辨率 (2=雙倍). |
dpi | number | 96 | 將分辨率提高到特定的DPI(每英寸點數) |
以下是增加了dpi和scale兩個選項之后的html2canvas源碼(拿走不謝):
https://github.com/eKoopmans/html2canvas/tree/develop/dist
最后將上面的html2canvas.js下載到本地,并引入到項目中:
// vue.js
// html
<div class="box">

</div>
<button @cllick="doShot">截圖</button>
// js
doShot () {
const w = $('.box').outerWidth(),
h = $('.box').outerHeight();
html2canvas($(".box"), {
allowTaint: true,
taintTest: false,
width: w,
height: h,
// window.devicePixelRatio是設備像素比
scale: window.devicePixelRatio,
onrendered: function(canvas) {
const dataUrl = canvas.toDataURL("image/png", 1.0),
newImg = document.createElement("img");
newImg.src = dataUrl;
$('.box').empty().append(newImg);
newImg.style.width = '100%';
}
});
}
最終的截圖效果如下:
如果大家還有什么更好的解決辦法,請分享一下!