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

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

/*使用Html2Canvas對當前頁面進行截圖*/
html2canvas(document.body).then(function(canvas) {
document.body.appendChild(canvas)
});

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

/*使用Canvas對頁面的某一元素截圖*/
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('截圖成功！')

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

/*實現(xiàn)將統(tǒng)計的數(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: '動態(tài)數(shù)據(jù) + 時間坐標軸'
},
xAxis: {
type: 'category',
boundaryGap: false,
data: chartData.x
},
yAxis: {
type: 'value',
axisLabel: {
formatter: '{value} °C'
}
},
series: [{
name:'實際控制值',
data: chartData.y,
type: 'line',
color:'#409EFF'
}]
});
var image = myChart.getDataURL({
pixelRatio: 2,
backgroundColor: '#fff'
})

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