JS中實現網頁截圖

xiaowugui666 發布于2019-08-23 11:49 / 1146人閱讀

摘要：前端頁面中可以使用將整個網頁或一部分區域截取成圖片并導出。目前比較好用的處理方式是先將轉換成，再從中導出圖片。調用，現在我們有了一個對象，下一步是保存到文件中。至此，對網頁中的一部分進行截圖并保存成文件就完成了。

前端頁面中可以使用JS將整個網頁或一部分區域截取成圖片并導出。

今天剛做了一次這個功能，和大家分享一下經驗。

使用html2canvas將dom轉換成canvas

網頁截圖的第一步，就是將dom轉換圖片。目前比較好用的處理方式是先將dom轉換成canvas，再從canvas中導出圖片。

可以使用html2canvas這個庫來實現dom轉換成canvas。

https://github.com/niklasvh/h...

示例代碼：

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

將canvas導出成圖片

canvas展示的時候，本身就有保存為圖片的功能。

如果需要的話，也可以在JS中手動操控。

canvas 有兩個API可以用來導出圖片，分別是 toDataURL 和 toBlob

https://developer.mozilla.org...

toDataURL可以把canvas導出成圖片的data url，toBlob 則是轉換成Blob對象，Blob對象可以保存成文件。

如果要在新窗口中展示圖片等，使用toDataURL導出的 data url就可以了，而要直接導出成文件的話，使用toBlob更好一些。

調用 canvas.toBlob()，現在我們有了一個Blob對象，下一步是保存Blob到文件中。

保存Blob為文件

Canvas.toBlob 的文檔 https://developer.mozilla.org... 中有提到如何保存Blob到文件，不過使用起來略為復雜。我推薦使用 filesaver 來解決這個問題。參見 https://github.com/eligrey/Fi...

Filesaver 支持保存 canvas 到文件，代碼如下：

import { saveAs } from "file-saver/FileSaver";
canvas.toBlob(function(blob) {
    saveAs(blob, "pretty image.png");
});

調用 saveAs 之后，瀏覽器就會執行下載的動作。根據瀏覽器的設置，可能會直接下載，或彈出保存對話框。

至此，對網頁中的一部分進行截圖并保存成文件就完成了。

圖片調優

導出的圖片基本上會保持原有的樣式，只有一小部分不支持。參見 https://html2canvas.hertzen.c...

但是如果截取的范圍比較大，那么導出的圖片有可能會出現模糊的情況。有可能是文字模糊，也有可能是圖片模糊等。這個時候就需要對圖片進行調優

圖片調優指的是在 html 導出至 canvas的這個階段調優，調優方法是修改 html2canvas的參數。

html2canvas(element, options);

調優主要有兩個方向：

對于高分屏，比如Retina，有可能會需要調高 scale 參數。它的默認值是 window.devicePixelRatio，一般是1，我修改成了1.2，感覺效果會好一點

如果截圖范圍比較大，可能會出現文字模糊的情況。這個時候可以用 windowWidth 和 windowHeight 指定渲染時用的窗口寬度和高度。將寬度調小可以降低模糊程度。

還有一些其它選項，參見 https://html2canvas.hertzen.c...

最后，附上參考代碼：

import { saveAs } from "file-saver/FileSaver"
import html2canvas from "html2canvas"
 
 
handleDownloadCapture = async () => {
  const reportDom = document.querySelector(".report-container")
  const actualWidth = reportDom.offsetWidth || 1000
  const actualHeight = reportDom.offsetHeight || 2000
  const factor = 0.6
  const canvas = await html2canvas(reportDom, {scale: 1.2, windowWidth: actualWidth * factor, windowHeight: actualHeight * factor})
  const filename = this.getExportFilename()
  canvas.toBlob(blob => saveAs(blob, filename))
}

GPU云服務器云服務器 js中實現歷史記錄中實現單點登錄 asp中實現登錄 asp中實現文件

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/97512.html

javascript在網頁中實現粘貼qq截圖功能

摘要：這篇文章主要介紹了在網頁中實現讀取剪貼板粘貼截圖功能即可以把剪貼板的截圖粘貼到網頁的一個輸入框中例如截圖旺旺截圖或者其它截圖軟件。這篇文章主要介紹了在網頁中實現讀取剪貼板粘貼截圖功能,即可以把剪貼板的截圖Ctrl+V粘貼到網頁的一個輸入框中,例如QQ截圖、旺旺截圖或者其它截圖軟件。具體代碼如下。利用 clipboardData 在網頁中實現截屏粘貼的功能 #box{ wi...

Barry_Ng 2019-08-02 15:55 評論0 收藏0
javascript在網頁中實現粘貼qq截圖功能

摘要：這篇文章主要介紹了在網頁中實現讀取剪貼板粘貼截圖功能即可以把剪貼板的截圖粘貼到網頁的一個輸入框中例如截圖旺旺截圖或者其它截圖軟件。這篇文章主要介紹了在網頁中實現讀取剪貼板粘貼截圖功能,即可以把剪貼板的截圖Ctrl+V粘貼到網頁的一個輸入框中,例如QQ截圖、旺旺截圖或者其它截圖軟件。具體代碼如下。利用 clipboardData 在網頁中實現截屏粘貼的功能 #box{ wi...

RichardXG 2019-08-19 18:26 評論0 收藏0
js利用clipboardData在網頁中實現截屏粘貼的功能

摘要：最近在做一個將屏幕截圖直接粘貼發送的功能，于是對此做了一些研究，下面是具體的實現代碼代碼如下，在這里只是簡單的做了一個框用作演示截屏粘貼具體實現在中保存在剪貼板中的數據類型判斷是否為圖片數據讀取該圖片下面是講粘貼的圖片內容傳送到后端進行最近在做一個將屏幕截圖直接粘貼發送的功能，于是對此做了一些研究，下面是具體的實現代碼：html代碼如下，在這里只是簡單的做了一個textare框用作演...

cuieney 2019-08-21 10:55 評論0 收藏0
JavaScript精編干貨

摘要：老姚淺談怎么學鑒于時不時，有同學私信問我老姚，下同怎么學前端的問題。擼碼聽歌，全局控制。淺析用 js 解析 xml 的方法由于項目上需要解析 xml，于是各種百度，然后自己總結了下各個主流瀏覽器解析 xml 的方法，只能是很淺顯的知道他的用法，但是還沒有深層次的研究。裝 X - 建立自己的斗圖網站庫之前加過一個斗圖群，看到很多經典的表情，然后就收藏到了 QQ，迫于本屌絲開不起...

Fourierr 2019-08-21 18:46 評論0 收藏0
在移動Web單頁應用中實現固定頁腳

摘要：考慮到要為頁腳留空間，結合傳統網頁中的固定頁腳的做法，得到完整的假定頁腳的高度為以上就是在這種條件下的固定頁腳的實現方法。結語移動單頁應用的頁面結構是比較特別，所以固定頁腳這么有用的東西做起來又是一個新話題了。一種單頁應用的頁面結構面向移動端的單頁應用（Single Page Web Application），從頁面代碼上來說，會使用較一般網頁不同的結構。單頁應用并不是說應用只需要...

Michael_Lin 2019-08-28 17:58 評論0 收藏0