美文网首页
html2canvas截图

html2canvas截图

作者: 苏基 | 来源:发表于2019-12-31 15:57 被阅读0次

时间仓促,长话短说。

用法

页面上需要具备的元素有两个:

  1. 要截图的区域
  2. 截完图后放图的元素

代码:

<div class="container" id="faultTree" ref="faultTree"></div>
<img :src="dataURL" alt="" />

dataURL就是截图的图地址。

常见问题

  1. 截图不全
  • 在点击保存图片时,此时要保存的资源较多,造成模块并没有完全加载完毕,就已经生成了截图;解决方案:(加上一个延时操作)
  • 由于html2canvas是根据body进行截图,若内容高度高于body时,就会出现这样的问题(大概意思就是有滚动条时造成的);解决方案:(在生成截图前,先把滚动条置顶)
  1. 截图失败
    报错:
Uncaught (in promise) DOMException: Failed to execute 'drawImage' on 'CanvasRenderingContext2D': The image argument is a canvas element with a width or height of 0.
  • 用了渐变色背景;解决方法:用图片代替。
  1. 图片跨域问题
  • 把图片放到本地引入。对于不复杂的部分可以用css代替图片来实现。

相关文章

  • html2canvas.js网页截图

    screenshot(){ console.log('自动截图') //自动截图 html2canvas($("...

  • JS将HTML生成PDF并下载

    1. html2canvas 简介我们可以直接在浏览器端使用html2canvas,对整个或局部页面进行“截图”。...

  • Blob文件保存

    html2Canvas截图并保存 后台返回excel数据流前端实现保存

  • 前端插件

    截图插件:html2canvas适配:flexible全景图:https://zhuanlan.zhihu.com...

  • html2canvas截图

    1.下载 2.main.js引入 3-1.实际使用:如图我想把这个vue标志截图下来,需要用ref先获取节点元素 ...

  • html2canvas截图

  • html2canvas截图

    时间仓促,长话短说。 用法 页面上需要具备的元素有两个: 要截图的区域 截完图后放图的元素 代码: dataURL...

  • h5 绘图操作(html2canvas记录)

    需求:将后台返回的图片拼接成一个整体的图片(模仿截图的效果) 解决:html2canvas插件,截图操作 插件下载...

  • JS库html2canvas实现页面截屏

    普通常见用法 安装npm install html2canvas 页面//html代码