JS中实现网页截图

xiaowugui666 发布于2019-08-23 11:49 / 926人阅读

摘要：前端页面中可以使用将整个网页或一部分区域截取成图片并导出。目前比较好用的处理方式是先将转换成，再从中导出图片。调用，现在我们有了一个对象，下一步是保存到文件中。至此，对网页中的一部分进行截图并保存成文件就完成了。

前端页面中可以使用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))
}

专线服务私有云 js中实现历史记录中实现单点登录 asp中实现登录 asp中实现文件

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/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
在移动Web单页应用中实现固定页脚

摘要：考虑到要为页脚留空间，结合传统网页中的固定页脚的做法，得到完整的假定页脚的高度为以上就是在这种条件下的固定页脚的实现方法。结语移动单页应用的页面结构是比较特别，所以固定页脚这么有用的东西做起来又是一个新话题了。一种单页应用的页面结构面向移动端的单页应用（Single Page Web Application），从页面代码上来说，会使用较一般网页不同的结构。单页应用并不是说应用只需要...

Michael_Lin 2019-08-28 17:58 评论0 收藏0
JavaScript精编干货

摘要：老姚浅谈怎么学鉴于时不时，有同学私信问我老姚，下同怎么学前端的问题。撸码听歌，全局控制。浅析用 js 解析 xml 的方法由于项目上需要解析 xml，于是各种百度，然后自己总结了下各个主流浏览器解析 xml 的方法，只能是很浅显的知道他的用法，但是还没有深层次的研究。装 X - 建立自己的斗图网站库之前加过一个斗图群，看到很多经典的表情，然后就收藏到了 QQ，迫于本屌丝开不起...

Fourierr 2019-08-21 18:46 评论0 收藏0