首页 > 其他分享 >html2canvas截图

html2canvas截图

时间:2023-11-28 21:24:47浏览次数:23  
标签:box body 截图 tempLink html2canvas document imgUrl

注意:
1、supervision_box 获取的Dom节点一定不能使用 overflow:auto, 否则滚动的内容将无法截图(overflow:auto放在父级上面滚动)
2、height: 2800 一定要大于Dom的高度 否则也截图不完整

const downImg = () => {
  const box = document.querySelector('.supervision_box')
  html2canvas(box, {
    logging: false,
    allowTaint: true,
    scale: window.devicePixelRatio,
    width: box.offsetWidth, //dom 原始宽度
    height: 2800, // 截图的长度
    scrollY: 0,
    scrollX: 0,
    useCORS: true,
    backgroundColor: '#ffffff'
  }).then(function (canvas) {
    let imgUrl = canvas.toDataURL('image/png')
    var tempLink = document.createElement('a') // 创建一个a标签
    tempLink.style.display = 'none'
    tempLink.href = imgUrl
    tempLink.setAttribute('download', `生产监督.png`)
    if (typeof tempLink.download === 'undefined') {
      tempLink.setAttribute('target', '_blank')
    }
    document.body.appendChild(tempLink) // 将a标签添加到body当中
    tempLink.click() // 启动下载
    document.body.removeChild(tempLink) // 下载完毕删除a标签
    window.URL.revokeObjectURL(imgUrl)
  })
}

标签:box,body,截图,tempLink,html2canvas,document,imgUrl
From: https://www.cnblogs.com/demoTimes/p/17863090.html

相关文章

  • 使用 CKEditor 上传图片, 粘贴屏幕截图
    之前写过wangEditor,那真是好用,文档也清晰,半天就搞定了,无奈没有对应license,只好选择别的。外语一般,阅读理解都靠蒙。CKEditor官方文档看的我云里雾里,国内的博客比较少,经过一天的调试,终于成功了。记录下,欢迎交流。1.下载CKEditor包。 打开samples文件夹下的index.html,确认ckedi......
  • NX二次开发 截图、向excel表格中插入图片 UF_DISP_create_framed_image
    简介:    NX二次开发截图、向excel表格中插入图片UF_DISP_create_framed_image截图:UF_DISP_create_framed_image插入图片intid=book->addPicture(L"F:\\ActionButton\\post_temp.bmp");sheet->setPicture(10,11,id);me.hpp内容:文章作者:里海......
  • vue前端截图
    <template><divclass="bigbox"> <divclass="box"ref="imageTest"> <divclass="boxTop"> 13653197159邀请您注册 <spanstyle="color:#5FFFB7;">金猫矿池</span> </div>......
  • mac下,利用chrome浏览器长截图(滚动截图)
    1、打开需要截图的网页,随便选一个,然后「右键」「检查」,如下图。 2、点击「检查」,出现控制台窗口后,按「command+shift+p」键,如下图所示。 3、在「Run」的后面,输入「capturefullsizescreenshot」,或者单独输入某个单词,也能在列表中找到,如下图。4、点击之后,就可以完......
  • 14:苏格拉底问答、实践过程截图、遇到问题解决问题截图,代码链接、
    ......
  • 苏格拉底问答、实践过程截图、遇到问题解决问题截图,代码链接
    include<stdio.h>include<stdlib.h>include<sys/types.h>include<sys/socket.h>include<netinet/in.h>include<arpa/inet.h>include<time.h>include<string.h>include<unistd.h>defineMAXLINE256......
  • html2canvas 生成一个 base64 的海报
    functiondownloadImage(base64Url){letimgUrl=base64Url;if(window.navigator.msSaveOrOpenBlob){//兼容IE浏览器的写法 letimageStr=atob(imgUrl.split(",")[1]); letn=imageStr.length; letu8arr=newUint8Array(n); while......
  • Airtest结合Poco对控件实施精准截图,学起来!
    此文章来源于项目官方公众号:“AirtestProject”版权声明:允许转载,但转载必须保留原链接;请勿用作商业或者非法用途1.前言最近在Q群内发现有个小伙伴提出了一个很有趣的脚本需求,想要实现“通过选择器获取到了控件,然后截图这个控件范围”,根据我们的Airtest的局部截图接口以及poco......
  • Tainted canvases may not be exported,视频帧截图跨域
    做原生相机拍照的时候遇见的有趣问题,视频流是上传到云服务器的在线链接,赋值到video的src上,然后使用canvas的drawImg方法去截取视频帧做照片,结果canvas报错视频跨域。解决方案:<videocrossorigin="anonymous"src="在线地址"ref="video"id="video"class="video"autoplay></v......
  • DX后台截图C++实现代码
    DX后台截图C++实现代码文章仅发布于https://www.cnblogs.com/Icys/p/DXGI.html和知乎上。传统的GDIAPI(BitBlt)虽然可以完美的完成后台截图的任务,但是归根结底效率还是太低。直接使用DXGI方法截图只能完成前台窗口的截图,而DXHOOK的截图方法平添风险,以及很多场景不现实。......