html2canvas截图的使用

2024-05-16 06:55:51

html2canvas截图的使用

前几天一个月薪35k的兄弟，给我推了一个人工智能学习网站，看了一段时间挺有意思的。包括语音识别、机器翻译等从基础到实战都有，很详细，分享给大家。大家及时保存，说不定啥时候就没了。

简述

html2canvas是一个脚本这个脚本可以允许用户直接在浏览器上拍摄网页或其中一部分的"屏幕截图".屏幕截图是基于DOM,因此可能无法真实表示100％的准确度，因为它无法生成实际的屏幕截图，而是根据页面上的可用信息构建屏幕截图。

解析：就是把dom结构传入html2canvas中，html2canvas会根据传入的dom结构生成对应的截图。例如你使用echarts画了一个图，你给这个dom一个ref拿到结构然后传入html2canvas就会生成对应的图表截图。

运行过程

脚本遍历加载页面的DOM。它收集那里所有元素的信息，然后将其用于构建页面的表示形式。换句话说，它实际上并不截取页面的屏幕快照，而是根据它从DOM读取的属性来构建页面的表示形式。所以可能有些这个脚本识别不了的css或者html将会在编译过程中失效!

局限性

脚本使用的所有图像都必须位于相同的来源，以便它无需代理即可读取它们。同样，如果canvas 页面上还有其他元素被跨域内容污染，它们将变脏并且无法被html2canvas读取。
该脚本不会呈现Flash或Java applet之类的插件内容。

安装

npm i html2canvas

导入

import html2canvas from 'html2canvas'

用法

<div ref="container"><span data-html2canvas-ignore>我是span，我不显示在截图中</span>// 标签设置data-html2canvas-ignore，就不会显示在截图中// 内容
</div>
<script>
import html2canvas from html2canvas
export default {methods: {async getImgBase64(){let ele = this.$refs['container']const width = ele.offsetWidthconst height = ele.offsetHeightlet canvas = await html2canvas(ele,{scale: 2,width,height,backgroundColor: "#FFF"})return canvas.toDadaURL()}}
}
</script>

参考

组件githab地址
Vue中Html2canvas的使用
html2canvas将HTML内容写入Canvas生成图片
html2canvas 使用总结

html2canvas截图的使用相关推荐

android截图canvas为空,html2canvas截图空白问题的解决
最近在项目中遇到一个需求,需要提供网页截图的功能.百度下发现html2canvas很好用.那就试试吧. 资源下载地址使用方式项目使用的react组件开发方式.参照官方的说明文档getting-st ...
在vue项目中使用html2canvas截图（固定区域截图）
1.项目目录下,打开dos窗口使用cnpm安装html2canvas插件. cnpm isntall html2canvas 2.在使用html2canvas的页面中,引入插件. import htm ...
html转换成canvas一片空白,html2canvas截图空白问题怎么解决 html2canvas截图空白问题解决方法...
本篇文章小编给大家分享一下html2canvas截图空白问题解决方法,通过代码图文详细分析了问题及解决方法,小编觉得挺不错的,现在分享给大家供大家参考,有需要的小伙伴们可以来看看. 项目使用的reac ...
前端 - html2canvas 截图显示空白
一.工作原理 html2canvas库的工作原理并不是真正的"截图",而是读取网页上的目标DOM节点的信息来绘制canvas,所以它并不支持所有的css属性. 二.在 img标签中 ...
关于html2canvas截图模糊的CDN版本差异的一个坑
问题项目使用html2canvas截图,存在截图模糊.左边是原html,右边是html2canvas生成的截图,明显发现html2canvas生成的模糊一大截查了解决办法,解决html2canva ...
提高html2canvas截图精度 / 提高dpi
项目中要实现div的截图功能,使用了html2canvas截的图比较模糊,我之前也记录过这个问题,html2canvas 实现网页截图,但是现在要对截图的精度进行优化,截出来的图片要实现打印照片的功能 ...
html2canvas 截图图片为空白无法截图
html2canvas 截图图片类型为空白解决办法图片地址不是本地图片是网络图会出现截取后为空白的情况 1.此时可以让后台返给你base64的图片地址就可以截取了 2.做个静态转化先存在本地 ...
vue页面截图用html2canvas截图不完整有滚动条+有echarts图表时完整截图——截图保存为图片或pdf
问题最开始需要做一个网页的截图,结果发现有滚动条怎么都截取不成功,然后各种百度到了一个办法,就是复制那个节点到body,然后在截取那个复制的节点,小页面实验了一下,成功了好开心,代码是这样的.但是, ...
html2canvas截图丢失部分元素
html2canvas截图丢失部分元素 html2canvas截图丢失所选区域的部分元素 //这是我需要截取的元素 //截取之后,图中会丢失一些模块请问有哪位道友遇到过类似的问题??? 相关代码 l ...

最新文章

热门文章