html2canvas 使用 與 坑

需求:將html頁面 截圖保存到本地 

方案:html2canvas 將html 生成canvas 然后使用canvas的toDataURL轉換為base64 形式 做下載    

安裝  官網地址:http://html2canvas.hertzen.com/

npm     npm install --sava html2canvas yarn yarn add html2canvas 在線js <script src="https://cdn.bootcss.com/html2canvas/0.5.0-beta4/html2canvas.js"></script>

相關

• 兼容

  • 該庫在以下瀏覽器（使用Promisepolyfill）上應該可以正常工作：

    • Firefox 3.5+

    • Google Chrome

    • Opera 12+

    • IE9+

    • Edge

    • Safari 6+

• 介紹

  • 拍攝網頁或者其中一部分的'屏幕截圖' 截圖基於DOM

  • 無法100%精確 因為無法生成實際的截圖而是根據頁面可用信息構建屏幕截圖

• 運行

  • 腳本遍歷加載頁面的DOM 它收集那里所有元素的信息，然后將其用於構建頁面的表示形式

  • 它實際上並不拍攝頁面的屏幕快照 根據它從DOM讀取的屬性來構建頁面的表示形式。

  • 它只能正確呈現它理解的屬性 所以很多css無效 (有關支持的css屬性 http://html2canvas.hertzen.com/features/ )

    • 大概看了一下 基本上都是支持的

    • 不支持 box-shadow border-image filter 等 (親測filter確實不支持...........我看除了這三其余的都不咋用的具體的還看上面的鏈接吧)

• 限制

• 腳本使用的所有圖像都必須位於同一原點 ，這樣它才能在無需代理的幫助下讀取它們。

• 同樣，如果canvas 頁面上還有其他元素被跨域內容污染，它們將變臟並且無法被html2canvas讀取。

• 該腳本不會呈現Flash或Java applet之類的插件內容。

使用

<div id="capture" style="padding: 10px; background: #f5da55">
    <h4 style="color: #000; ">Hello world!</h4>
</div>

html2canvas(document.querySelector("#capture")).then(canvas => {
    document.body.appendChild(canvas)
});

 

以上是搬運的官網例子

參數解釋  

要element使用帶有一些（可選）選項的html2canvas呈現，只需調用html2canvas(element, options);

html2canvas(document.body,{第二個參數可配置}).then(function(canvas) {
    document.body.appendChild(canvas);
});

 

常用配置 以下為我使用的配置 具體配置(http://html2canvas.hertzen.com/configuration)

名稱	默認	用於
scale	window.devicePixelRatio	用於渲染的比例。默認為瀏覽器設備像素比率。可以解決不清晰問題
width	Element width	寬度 canvas
height	Element height	高度 canvas
logging	true	啟用日志以進行調試
allowTaint	false	是否允許跨域圖像污染畫布

 

 

 

 項目中應用

坑　開始嘍

一、截圖上方白屏 

問題 滾動條導致截圖可見視圖高度 卷進去的距離就是空白了 

解決 先回到頂部 在生成后回到原來位置

/**
* 獲取滾動條的位置，body絕對定位，top值為負當前滾動條的位置。 用於解決截圖上方白屏問題
*/
var y = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0;
$('body').css({
  position: 'fixed',
  top: `-${y}px`,
});

/**
* 生成海報以后 滾動條設置回到原來的位置
*/

$('body').css({
  position: 'static',
});
window.scrollTo(0, y);

 

二、網絡圖片截圖不顯示

解決  配置中允許網絡圖片

 html2canvas(canvasObj, { allowTaint: true, scale: window.devicePixelRatio, //像素比
       useCORS: true, //允許服務器圖片
       height: canvasObj.scrollHeight,//canvas高
       width: canvasObj.scrollWidth,//canvas寬
       backgroundColor: "#fb7299", logging: false }).then((canvas) => { 　console.log(canvas); 　});

 

三、ios截圖空白 安卓正常 

問題 懷疑是回到 解決第一個問題的時候  回到頂部又直接回到位置 導致 ios 啥也沒看到 

解決 將生成canvas 變成異步的  

var y = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0;
$('body').css({ position: 'fixed', top: `-${y}px`, }); setTimeout(() => { //獲取html元素 可以指定元素 也可以直接document.body 此處是指定的
 let canvasObj = document.querySelector('.boss-box'); html2canvas(canvasObj, { allowTaint: true, scale: window.devicePixelRatio, //像素比
       useCORS: true,                   //允許服務器圖片
       height: canvasObj.scrollHeight,//canvas高
       width: canvasObj.scrollWidth,//canvas寬
       backgroundColor: "#fb7299", logging: false }).then((canvas) => { 　console.log(canvas); 　　 //通過canvas.toDataURL() 生成dataurl 圖片類型 'image/png' 圖片質量 1 
      let base64 = canvas.toDataURL("image/png", 1); // 當生成海報之后，再把滾動條設置回原來的位置。
      $('body').css({ position: 'static', }); window.scrollTo(0, y); 　});  }, 500)

四、設置的背景顏色沒有了  解決利用opt設置背景色

 html2canvas(canvasObj, { allowTaint: true, scale: window.devicePixelRatio, //像素比
       useCORS: true,                   //允許服務器圖片
       height: canvasObj.scrollHeight,//canvas高
       width: canvasObj.scrollWidth,//canvas寬
       backgroundColor: "#fb7299", 背景色 logging: false }).then((canvas) => { 　console.log(canvas); 　});

五、對於截出來的圖片不清楚的問題 

我看很多博客里說 可以將canvas放大幾倍 然后生成的時候按照比例縮小  巴拉巴拉....小魔仙   之類的 

還有在opt中設置dpi 和 scale 

例如 這樣的  

var opts = { dpi: window.devicePixelRatio * 4, scale: scale, 
};

我是按照官網這樣配置的 

var opts = { scale: window.devicePixelRatio };

 

截圖出來就是 圖片依舊不清楚 就很郁悶    文字都很清楚 但是圖片不行 你說郁悶不郁悶  然后我就騙產品小哥哥 就是這樣的 不然圖片里的內容我自己填文字....  於是蒙混過關 

優化前  

 

 今天閑着 就又不死心的來了  准備看看有沒有好的代碼可以抄抄   !!!!!!   

看到設置這些清晰方式的前提  是 不要使用 background-color 內置圖片 請使用 <img /> 否則一切配置都是徒勞 地址：https://blog.csdn.net/Young_Gao/article/details/101538930

 

 換成img 以后 看看這圖  相當的高清 very good 可算是把心放下來了 ...   來自一個不服輸的小可愛.....

優化后

 

 

 

六、對於截出來的 圖片 有鋸齒的問題 

請教了大佬以后 說是切圖的上下左右留一些空白 就可以  可能是瀏覽器算像素點遇到小數的問題 

也確實解決了  在此感謝ul老師 重新調整了切圖  (當然他也看不見)

處理前

       

 處理后

 

 再后來查閱資料的過程中發現有方法可以解決 (不過既然圖的換了我就沒有在試 是否可以解決了  有興趣的小伙伴可以嘗試 然后來告訴我 )

 照抄代碼如下 地址 https://blog.csdn.net/lmastersparkl/article/details/109205352?utm_medium=distribute.pc_relevant.none-task-blog-title-7&spm=1001.2101.3001.4242

　　　　 var context = canvas.getContext('2d'); // 【重要】關閉抗鋸齒
        context.mozImageSmoothingEnabled = false; context.webkitImageSmoothingEnabled = false; context.msImageSmoothingEnabled = false; context.imageSmoothingEnabled = false;

 

 

以上就是大概的心酸路程   ............ 拿到base64以后 

保存相冊或者分享長圖

 

 給客戶端

 

pc端下載   (download的第二個參數 可以自定義圖片名稱)

const a = document.createElement('a'); a.setAttribute('download', '長圖'); a.setAttribute('href', base64); a.setAttribute('id', 'downloadImg'); if (!document.getElementById('downloadImg')) { document.body.appendChild(a); } a.click();

 

 

挖挖坑埋埋坑 摸魚一天又一天