基于echarts圖表生成高清晰度視頻的方法
本文將探討如何將基于echarts生成的動態(tài)圖表（例如支持動態(tài)排序的柱狀圖）轉(zhuǎn)化為高清晰度的視頻。直接使用屏幕錄制軟件往往會造成視頻清晰度不足的問題，而echarts使用canvas或svg渲染，這為我們提供了提升清晰度的機會。
問題在于如何利用echarts的canvas渲染特性直接生成視頻，而不是依賴屏幕錄制。解決方法是使用JavaScript庫來實現(xiàn)視頻錄制功能。
一種方法是使用recordrtc.JS插件。該插件結(jié)合html2canvas，可以將canvas內(nèi)容錄制成視頻。 需要引入recordrtc.js和html2canvas.js這兩個插件。以下代碼片段展示了如何使用recordrtc.js將echarts圖表錄制成mp4視頻：
<!doctype html> <html lang="cmn-hans"> <head> <meta charset="utf-8"> <meta http-equiv=x-ua-compatible content="ie=edge,chrome=1"> <meta name="renderer" content="webkit"> <title>echarts to video</title> <style> html,body,#mycanvas{ height: 100%; width: 100%; padding: 0; margin: 0; } </style> </head> <body> <div id="mycanvas"></div> <script type="text/javascript" src="https://cdn.bootcss.com/echarts/4.7.0/echarts-en.min.js"></script> <script src="https://cdn.bootcss.com/html2canvas/0.5.0-beta4/html2canvas.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/recordrtc/5.5.9/recordrtc.js"></script> <script src="https://cdn.bootcss.com/filesaver.js/1.3.8/filesaver.min.js"></script> <script> let $parent = document.getelementbyid('mycanvas') let mychart = echarts.init($parent); //這里的option就是echrts案例中的option，代碼太多，就不貼了 mychart.setoption(option); settimeout(function(){ //開始錄制 exporttovideo(5000) },500) function exporttovideo(time){ //time 為錄制時長 毫秒 time = time || 0 let $canvas = document.queryselector('#mycanvas canvas') var recordrtc = recordrtc($canvas, { type: 'canvas' }); //開始錄制 recordrtc.startrecording(); settimeout(function(){ //錄制結(jié)束 recordrtc.stoprecording(function(videourl) { console.log(videourl) var recordedblob = recordrtc.getblob(); //recordrtc.getdataurl(function(dataurl) { }); saveas(recordedblob, "test.mp4"); }); }, time) } </script> </body> </html>
如果需要生成gif動畫，可以使用gif.js插件。 需要引入gif.js插件。代碼片段如下：
立即學(xué)習(xí)“Java免費學(xué)習(xí)筆記（深入）”；
<!DOCTYPE html> <html lang="cmn-hans"> <head> <meta charset="utf-8"> <meta http-equiv=X-UA-Compatible content="IE=edge,chrome=1"> <meta name="renderer" content="webkit"> <title>echarts to gif</title> <style> html,body,#myCanvas{ height: 100%; width: 100%; padding: 0; margin: 0; } </style> </head> <body> <div id="myCanvas"></div> <script type="text/javascript" src="https://cdn.bootcss.com/echarts/4.7.0/echarts-en.min.js"></script> <script type="text/javascript" src="https://cdn.bootcss.com/gif.js/0.2.0/gif.js"></script> <script src="https://cdn.bootcss.com/FileSaver.js/1.3.8/FileSaver.min.js"></script> <script> let $parent = document.getElementById('myCanvas') let myChart = echarts.init($parent); //這里的option就是echrts案例中的option，代碼太多，就不貼了 myChart.setOption( option ); setTimeout(function(){ //開始錄制gif exportToGif(5000) }, 20) function exportToGif(time){ var start = Date.now() //time 為錄制時長 毫秒 time = time || 0 let $canvas = document.querySelector('#myCanvas canvas') function loop(){ window.requestAnimationFrame(function(){ gif.addFrame($canvas, {delay: 100}); if(Date.now() - start >= time){ gif.render(); }else{ loop() } }) } var gif = new GIF({ workers: 2, quality: 10 }); gif.on('finished', function(blob) { saveAs(blob, "test.gif"); }); loop() } </script> </body> </html>
這些代碼片段展示了如何使用相應(yīng)的javascript庫來錄制視頻或gif，從而避免了屏幕錄制帶來的清晰度問題。 記住，需要根據(jù)實際情況調(diào)整錄制時長以及gif的幀率和質(zhì)量參數(shù)。
? 版權(quán)聲明
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載。
THE END
