今天我們來學習一波怎麼將一個網頁生成一張圖片的，主要的應用場景在，分享，截圖等
我主要使用的是一個js庫 html2canvas ,下面來了解一下他的詳細用法吧。

大家可以去這裡https://download.csdn.net/download/qq_20343517/10739325下載這個庫
然後直接通過script標籤引入或者通過其他方式匯入也可以。

基於html2canvas.js 可將一個元素渲染為canvas，只需要簡單的呼叫，html2canvas(element[,options]);即可，下列html2canvas方法會返回一個包含有canvas元素的promise：

html2canvas(document.body,{useCORS: true}).then(function(canvas) {
   document.body.appendChild(canvas);
});
 

• 由於canvas對於圖片資源的同源限制，經測試，同時包含cdn圖片和本地圖片的資源的頁面，只有本地圖片能夠被渲染出來。

canvas轉img

方案一：基於原生canvas的 toDataURL 方法將canvas輸出為 data:url 型別的圖片地址，再將該圖片的地址賦值給 image 元素的src屬性即可，

方案二：使用第三方庫 Canvas2Image.js 呼叫其 convertToImage 方法即可

<div id="box">
    <h1>hello world</h1>
    <img style="width:100px;" src="abc.png" alt="">
    <p style="background-color:#000;color:#fff;border:1px solid red;">我是一隻大灰狼</p>
</div>
<a href="#" id="a" download>點選下載圖片</a>
 

html2canvas(document.getElementById("box"),{useCORS: true}).then(function(canvas) {
    url=canvas.toDataURL();
    a=document.querySelector('#a');
    a.href=url;
});

高保真圖片

可以參考這個連結https://segmentfault.com/a/1190000011478657