資料載入中

胡言亂語

使用html2canvas截圖將背景顏色更改為白色

在Javascript裡,我們可以使用html2canvas來將網頁畫面的某個區塊截圖下來存檔。

運用方式如下:
HTML
<div id="container">
Hello world!
</div>

JavaScript
  $('html, body').scrollTop(0);
   html2canvas(document.getElementById('container')).then(function(canvas) {
           var a = document.createElement('a');
            a.href = canvas.toDataURL("image/jpeg").replace("image/jpeg", "image/octet-stream");
            a.download = 'image.jpg';
            a.click();
   });

若要將擷取下來的畫面讓背景呈現白色只需要將HTML修改如下:
<div id="container" style="background:#FFF">
Hello world!
</div>

參考連結網址

使用html2canvas截圖將背景顏色更改為白色
以上紀錄

 

  • Javascript 網頁區塊截圖工具
  • html2canvas 使用方法
  • 擷取畫面背景顏色修改
  • 網頁截圖存檔技巧
  • 如何使用 html2canvas 擷取畫面
https://innstory.com/story-使用html2canvas截圖將背景顏色更改為白色-2346

上一篇
 發現茄十二星瓢蟲

下一篇
分享Googlenew服務新增Adobe瀏覽器中就可轉PDF檔 

發表留言

作者簡介

離不開電腦的宅男


推薦閱讀

作者其他相關類別故事

分享 微軟宣布重大改組!21年老將下台、解散Windows團隊「轉攻2業務」,一段大時代成歷史-風傳媒

分享 微軟宣布重大改組!21…

Mark Chang 7 年又 329 天 2.2K

階段性任務的結束。

分享 紓壓小物-熱熔槍3D筆  鄭永銘老師的Blog

分享 紓壓小物-熱熔槍3D筆…

Mark Chang 7 年又 325 天 2.6K

這個挺有趣的,看來之前買錯的熱熔槍終於有用處了!! 只是有沒有那麼好的藝術天分又是另外一個課題了@@...

分享 有神快拜!日手作達人做出會「寫時間」的機器人手錶,超精緻根本可以直接拿去賣!-風傳媒

分享 有神快拜!日手作達人做…

Mark Chang 7 年又 265 天 1.8K

好特別啊~設計這種機器人真的是有別於一般先進科技的有趣。