Javascript 編程語言的普及，已經(jīng)成為了現(xiàn)代前端開發(fā)的必備工具，通過它我們可以快速實(shí)現(xiàn)網(wǎng)頁動(dòng)態(tài)變化、交互等功能。同時(shí)，在實(shí)現(xiàn)可視化結(jié)果的時(shí)候，生成截圖這一功能也是很重要的，下邊就對(duì) Javascript 如何生成截圖的問題進(jìn)行探討。

對(duì)于網(wǎng)頁客戶端來說，我們一般需要全界面截圖，通過底層的接口截取網(wǎng)頁全部數(shù)據(jù)，然后過濾掉瀏覽器相關(guān)工具條、狀態(tài)欄等非頁面內(nèi)容，最后轉(zhuǎn)換為圖片輸出，實(shí)現(xiàn)網(wǎng)頁的全局截圖。

/*使用Html2Canvas對(duì)當(dāng)前頁面進(jìn)行截圖*/
html2canvas(document.body).then(function(canvas) {
document.body.appendChild(canvas)
});

對(duì)于需要截取局部的頁面，需要依據(jù)實(shí)際情況進(jìn)行多種方法的實(shí)現(xiàn)。例如使用網(wǎng)頁本身提供的SVG、Canvas、WebGL等介質(zhì)，渲染后進(jìn)行截取，根據(jù)不同的情況選擇相應(yīng)的方法是一個(gè)不錯(cuò)的方案。

/*使用Canvas對(duì)頁面的某一元素截圖*/
var canvasObj = document.createElement('canvas')
var ctx = canvasObj.getContext('2d')
canvasObj.width = ele.offsetWidth
canvasObj.height = ele.offsetTop
ctx.drawImage(ele, 0, 0, ele.offsetWidth, ele.offsetHeight)
var dataURL = canvasObj.toDataURL('image/png', 1.0)
console.log('截圖成功！')

當(dāng)然，我們可能也希望在網(wǎng)頁實(shí)時(shí)生成一些動(dòng)態(tài)的截圖效果。比如，網(wǎng)頁需要顯示某一時(shí)刻的天氣溫度，不同的氣象數(shù)據(jù)可以渲染為不同的背景圖片或者動(dòng)畫等效果，這是實(shí)現(xiàn)效果的必要條件。

/*實(shí)現(xiàn)將統(tǒng)計(jì)的數(shù)據(jù)渲染為折線圖*/
var chartData = {
x: [1,2,3,4],
y: [10,50,30,20],
}
var myChart = echarts.init(document.getElementById('chart'));
myChart.setOption({
title: {
text: '動(dòng)態(tài)數(shù)據(jù) + 時(shí)間坐標(biāo)軸'
},
xAxis: {
type: 'category',
boundaryGap: false,
data: chartData.x
},
yAxis: {
type: 'value',
axisLabel: {
formatter: '{value} °C'
}
},
series: [{
name:'實(shí)際控制值',
data: chartData.y,
type: 'line',
color:'#409EFF'
}]
});
var image = myChart.getDataURL({
pixelRatio: 2,
backgroundColor: '#fff'
})

總之，Javascript 的ToDataURL、Svg和Canvas等工具，讓前端工程師可以隨心所欲地實(shí)現(xiàn)網(wǎng)頁截圖。 另外，研發(fā)人員也可以根據(jù)實(shí)際需求進(jìn)行創(chuàng)新性的定制開發(fā)。