成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

JS中實(shí)現(xiàn)網(wǎng)頁截圖

xiaowugui666 / 1159人閱讀

摘要：前端頁面中可以使用將整個(gè)網(wǎng)頁或一部分區(qū)域截取成圖片并導(dǎo)出。目前比較好用的處理方式是先將轉(zhuǎn)換成，再?gòu)闹袑?dǎo)出圖片。調(diào)用，現(xiàn)在我們有了一個(gè)對(duì)象，下一步是保存到文件中。至此，對(duì)網(wǎng)頁中的一部分進(jìn)行截圖并保存成文件就完成了。

前端頁面中可以使用JS將整個(gè)網(wǎng)頁或一部分區(qū)域截取成圖片并導(dǎo)出。

今天剛做了一次這個(gè)功能，和大家分享一下經(jīng)驗(yàn)。

使用html2canvas將dom轉(zhuǎn)換成canvas

網(wǎng)頁截圖的第一步，就是將dom轉(zhuǎn)換圖片。目前比較好用的處理方式是先將dom轉(zhuǎn)換成canvas，再?gòu)腸anvas中導(dǎo)出圖片。

可以使用html2canvas這個(gè)庫來實(shí)現(xiàn)dom轉(zhuǎn)換成canvas。

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

示例代碼：

html2canvas(document.querySelector("#capture")).then(canvas => {
    document.body.appendChild(canvas)
});
將canvas導(dǎo)出成圖片

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

如果需要的話，也可以在JS中手動(dòng)操控。

canvas 有兩個(gè)API可以用來導(dǎo)出圖片，分別是 toDataURL 和 toBlob

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

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

toDataURL可以把canvas導(dǎo)出成圖片的data url，toBlob 則是轉(zhuǎn)換成Blob對(duì)象，Blob對(duì)象可以保存成文件。

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

調(diào)用 canvas.toBlob()，現(xiàn)在我們有了一個(gè)Blob對(duì)象，下一步是保存Blob到文件中。

保存Blob為文件

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

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

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

調(diào)用 saveAs 之后，瀏覽器就會(huì)執(zhí)行下載的動(dòng)作。根據(jù)瀏覽器的設(shè)置，可能會(huì)直接下載，或彈出保存對(duì)話框。

至此，對(duì)網(wǎng)頁中的一部分進(jìn)行截圖并保存成文件就完成了。

圖片調(diào)優(yōu)

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

但是如果截取的范圍比較大，那么導(dǎo)出的圖片有可能會(huì)出現(xiàn)模糊的情況。有可能是文字模糊，也有可能是圖片模糊等。這個(gè)時(shí)候就需要對(duì)圖片進(jìn)行調(diào)優(yōu)

圖片調(diào)優(yōu)指的是在 html 導(dǎo)出至 canvas的這個(gè)階段調(diào)優(yōu)，調(diào)優(yōu)方法是修改 html2canvas的參數(shù)。

html2canvas(element, options);

調(diào)優(yōu)主要有兩個(gè)方向：

對(duì)于高分屏，比如Retina，有可能會(huì)需要調(diào)高 scale 參數(shù)。它的默認(rèn)值是 window.devicePixelRatio，一般是1，我修改成了1.2，感覺效果會(huì)好一點(diǎn)

如果截圖范圍比較大，可能會(huì)出現(xiàn)文字模糊的情況。這個(gè)時(shí)候可以用 windowWidth 和 windowHeight 指定渲染時(shí)用的窗口寬度和高度。將寬度調(diào)小可以降低模糊程度。

還有一些其它選項(xiàng)，參見 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))
}

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/97512.html

相關(guān)文章

  • javascript在網(wǎng)頁中實(shí)現(xiàn)粘貼qq截圖功能

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

    Barry_Ng 評(píng)論0 收藏0

  • javascript在網(wǎng)頁中實(shí)現(xiàn)粘貼qq截圖功能

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

    RichardXG 評(píng)論0 收藏0

  • js利用clipboardData在網(wǎng)頁中實(shí)現(xiàn)截屏粘貼的功能

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

    cuieney 評(píng)論0 收藏0

  • JavaScript精編干貨

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

    Fourierr 評(píng)論0 收藏0

  • 在移動(dòng)Web單頁應(yīng)用中實(shí)現(xiàn)固定頁腳

    摘要：考慮到要為頁腳留空間，結(jié)合傳統(tǒng)網(wǎng)頁中的固定頁腳的做法，得到完整的假定頁腳的高度為以上就是在這種條件下的固定頁腳的實(shí)現(xiàn)方法。結(jié)語移動(dòng)單頁應(yīng)用的頁面結(jié)構(gòu)是比較特別，所以固定頁腳這么有用的東西做起來又是一個(gè)新話題了。 一種單頁應(yīng)用的頁面結(jié)構(gòu) 面向移動(dòng)端的單頁應(yīng)用（Single Page Web Application），從頁面代碼上來說，會(huì)使用較一般網(wǎng)頁不同的結(jié)構(gòu)。單頁應(yīng)用并不是說應(yīng)用只需要...

    Michael_Lin 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

閱讀需要支付1元查看
<