当前位置： 首页 > news >正文

vue2 -- 截图工具html2canvas

news 2025/12/26 22:51:03

文章目录

  • 🍉需求描述
  • 🍉基础功能实现
  • 🍉下载另存为本地图片功能

🍉需求描述

可以将网页中的指定元素或整个页面截取为图片，以便保存或分享。

🍉基础功能实现

在 Vue 中使用 html2canvas 实现

1：安装 html2canvas 库。你可以使用 npm 安装，命令如下：

npm install html2canvas

2：在需要使用 html2canvas 的 Vue 组件中，引入 html2canvas 库：

import html2canvas from 'html2canvas';

:3：编写截图逻辑。你可以在组件的方法中编写，例如：















相关文章：
















vue2 -- 截图工具html2canvas




文章目录 🍉需求描述🍉基础功能实现🍉下载另存为本地图片功能🍉需求描述 可以将网页中的指定元素或整个页面截取为图片，以便保存或分享。 🍉基础功能实现 
在 Vue 中使用 html2canvas 实现 
1：安装 html2canvas 库。你可以使用 npm 安装，命令如下： 
npm install …...






编程日记
2024/1/22 15:54:42



















笔记-孙子兵法-第三篇-谋攻（1）-不战而屈人之兵，上兵伐谋，韩信之死




笔记-From 《华杉讲透孙子兵法》和《兵以诈立，我读孙子》 
第三篇-谋攻（1）不战而屈人之兵 
《孙子兵法》第一篇讲计，第二篇讲野战，第三篇就讲攻城。 
《孙子》尚谋，认为最好是“不战而屈人之兵”&#xff0…...






编程日记
2024/1/22 15:50:38



















kafka参数配置参考和优化建议 —— 筑梦之路




对于Kafka的优化，可以从以下几个方面进行思考和优化： 硬件优化：使用高性能的硬件设备，包括高速磁盘、大内存和高性能网络设备，以提高Kafka集群的整体性能。  配置优化：调整Kafka的配置参数，包括…...






编程日记
2024/1/22 15:49:36



















如何本地搭建Splunk Enterprise数据平台并实现任意浏览器公网访问




文章目录 前言1. 搭建Splunk Enterprise2. windows 安装 cpolar3. 创建Splunk Enterprise公网访问地址4. 远程访问Splunk Enterprise服务5. 固定远程地址 前言 
本文主要介绍如何简单几步，结合cpolar内网穿透工具实现随时随地在任意浏览器，远程访问在本地…...






编程日记
2024/1/22 15:48:35



















FlinkAPI开发之状态管理




案例用到的测试数据请参考文章： Flink自定义Source模拟数据流 原文链接：https://blog.csdn.net/m0_52606060/article/details/135436048 
Flink中的状态 
概述 
有状态的算子 状态的分类 
托管状态（Managed State）和原始状态&…...






编程日记
2024/1/22 15:47:33



















initdb: command not found【PostgreSQL】




如果您遇到 “initdb: command not found” 错误，说明 initdb 命令未找到，该命令用于初始化新的 PostgreSQL 数据库群集。这通常是因为 PostgreSQL 相关的工具未正确安装或者安装路径不在系统的 PATH 变量中。 
以下是解决这个问题的一些建议&#xff1a…...






编程日记
2024/1/22 15:43:28



















QT第六天




要求：使用QT绘图，完成仪表盘绘制，如下图。 素材 运行效果： 代码：  
widget.h 
#ifndef WIDGET_H
#define WIDGET_H#include <QWidget>
#include <QPainter>
#include <QPen>QT_BEGIN_NAMESPACE
name…...






编程日记
2024/1/22 15:40:25



















linux 安装 grafana




Ubuntu 和 Debian(64 位)SHA256&#xff1a; e551434e9e3e585633f7b56a33d8f49cda138d92ad69c2c29dcec2c3ede84607 sudo apt-get install -y adduser libfontconfig1 muslwget https://dl.grafana.com/enterprise/release/grafana-enterprise_10.2.3_amd64.debsudo dpkg -i gra…...






编程日记
2024/1/22 15:39:23



















“GPC爬虫池有用吗？




作为光算科技的独有技术&#xff0c;在深入研究谷歌爬虫推出的一种吸引谷歌爬虫的手段 
要知道GPC爬虫池是否有用&#xff0c;就要知道谷歌爬虫这一概念&#xff0c;谷歌作为一个搜索引擎&#xff0c;里面有成百上千亿个网站&#xff0c;对于里面的网站内容&#xff0c;自然不可…...






编程日记
2024/1/22 15:38:22



















Kotlin协程的JVM实现源码分析（下）




协程 根据 是否保存切换 调用栈 &#xff0c;分为&#xff1a; 
有栈协程&#xff08;stackful coroutine&#xff09;无栈协程&#xff08;stackless coroutine&#xff09; 
在代码上的区别是&#xff1a;是否可在普通函数里调用&#xff0c;并暂停其执行。 
Kotlin协程&…...






编程日记
2024/1/22 15:36:20



















js实现九九乘法表




效果图 代码 
<!DOCTYPE html>
<html><head><meta charset"utf-8"><title></title></head><body><script type"text/javascript">// 输出乘法口诀表// document.write () 空格 " "  换行…...






编程日记
2024/1/22 15:33:17



















HarmonyOS鸿蒙应用开发（三、轻量级配置存储dataPreferences）




在应用开发中存储一些配置是很常见的需求。在android中有SharedPreferences&#xff0c;一个轻量级的存储类&#xff0c;用来保存应用的一些常用配置。在HarmonyOS鸿蒙应用开发中&#xff0c;实现类似功能的也叫首选项&#xff0c;dataPreferences。 相关概念 
ohos.data.prefe…...






编程日记
2024/1/22 15:31:14



















基于 IDEA 进行 Maven 工程构建




1. 构建概念和构建过程 
项目构建是指将源代码、依赖库和资源文件等转换成可执行或可部署的应用程序的过程&#xff0c;在这个过程中包括编译源代码、链接依赖库、打包和部署等多个步骤。 
项目构建是软件开发过程中至关重要的一部分&#xff0c;它能够大大提高软件开发效率&am…...






编程日记
2024/1/22 15:29:12



















牛客周赛 Round 17 解题报告 | 珂学家 | 枚举贪心 + 二分最短路




前言 整体评价 
其实T3最有意思&#xff0c; T4很典&#xff0c;是一道二分最短路径经典套路。 
T3 如果尝试 增量差值最小 的最大梯度去贪心的话&#xff0c;会失败&#xff0c;需要切换思路。 
珂朵莉 牛客周赛专栏 
珂朵莉 牛客小白月赛专栏 A. 游游的正方形披萨 
如果横竖差…...






编程日记
2024/1/22 15:27:08



















喝口水都长胖？原来是“胖菌”惹的祸？！




减肥是一个永恒的话题&#xff0c;而关于长胖的原因&#xff0c;已有研究很多都聚焦在肥胖人群中肠道菌群的种类和丰度&#xff0c;很少有研究关注肠道微生物的基因与宿主肥胖的关系。近期发表在《Nature Medicine》的这项研究&#xff0c;使用来GWAS研究人类肠道微生物组与宿主…...






编程日记
2024/1/22 15:26:07



















【C++干货基地】namespace超越C语言的独特魅力（文末送书）




&#x1f3ac; 鸽芷咕&#xff1a;个人主页 &#x1f525; 个人专栏: 《C干货基地》《粉丝福利》 ⛺️生活的理想&#xff0c;就是为了理想的生活!  引入 哈喽各位铁汁们好啊&#xff0c;我是博主鸽芷咕《C干货基地》是由我的襄阳家乡零食基地有感而发&#xff0c;不知道各位的…...






编程日记
2024/1/22 15:24:04



















做一个简单的倒计时




<div>距离过年还有:<span></span></div><script>let div  document.querySelector("div");let span  document.querySelector("span");// 获取未来时间戳let future  new Date("2024-2-10 00:00:00");// 获取当下…...






编程日记
2024/1/22 15:12:53



















微服务环境搭建：docker+nacos单机




nacos需要连接mysql&#xff0c;持久化相关配置。 
1. 部署好mysql后&#xff0c;新建nacos数据库然后初始化nacos脚本 
-- --------------------------------------------------------
-- 主机:                           192.168.150.101
-- 服务器版本:                   …...






编程日记
2024/1/22 15:09:50



















Opencv轮廓检测运用与理解




目录 引入 
基本理解 
加深理解 
①比如我们可以获取我们的第一个轮廓,只展示第一个轮廓 
②我们还可以用一个矩形把我们的轮廓给框出来 
③计算轮廓的周长和面积 引入 
顾名思义,就是把我们图片的轮廓全部都描边出来 也就是我们在日常生活中面部识别的时候会有一个框,那玩意就…...






编程日记
2024/1/22 15:03:43



















Java 8的新特性简单分享（后续有系列篇~敬请期待）




Java 8的新特性分享 
Java 8是Java语言迎来的一次革命性的更新&#xff0c;引入了众多强大的新特性&#xff0c;使得Java开发变得更加现代化和便捷。在这篇博客中&#xff0c;我们将深入探讨Java 8的一些主要特性&#xff0c;并通过丰富的案例演示展示它们的用法。 
1. Lambda表…...






编程日记
2024/1/22 14:56:34





















LBE-LEX系列工业语音播放器|预警播报器|喇叭蜂鸣器的上位机配置操作说明




LBE-LEX系列工业语音播放器|预警播报器|喇叭蜂鸣器专为工业环境精心打造&#xff0c;完美适配AGV和无人叉车。同时&#xff0c;集成以太网与语音合成技术&#xff0c;为各类高级系统&#xff08;如MES、调度系统、库位管理、立库等&#xff09;提供高效便捷的语音交互体验。 
L…...






编程新知
2025/12/26 6:10:22



















内存分配函数malloc kmalloc vmalloc




内存分配函数malloc kmalloc vmalloc malloc实现步骤： 
1）请求大小调整：首先，malloc 需要调整用户请求的大小，以适应内部数据结构（例如，可能需要存储额外的元数据）。通常，这包括对齐调整，确保分配的内存地址满足特定硬件要求（如对齐到8字节或16字节边界）。 
2）空闲…...






编程新知
2025/11/1 5:21:39



















CTF show Web 红包题第六弹




提示 
1.不是SQL注入 2.需要找关键源码 
思路 
进入页面发现是一个登录框&#xff0c;很难让人不联想到SQL注入&#xff0c;但提示都说了不是SQL注入&#xff0c;所以就不往这方面想了 
​ 
先查看一下网页源码&#xff0c;发现一段JavaScript代码&#xff0c;有一个关键类ctfs…...






编程新知
2025/12/18 17:36:43



















JUC笔记(上)-复习 涉及死锁 volatile synchronized CAS 原子操作




一、上下文切换 
即使单核CPU也可以进行多线程执行代码&#xff0c;CPU会给每个线程分配CPU时间片来实现这个机制。时间片非常短&#xff0c;所以CPU会不断地切换线程执行&#xff0c;从而让我们感觉多个线程是同时执行的。时间片一般是十几毫秒(ms)。通过时间片分配算法执行。…...






编程新知
2025/12/16 16:33:37



















管理学院权限管理系统开发总结




文章目录 &#x1f393; 管理学院权限管理系统开发总结 - 现代化Web应用实践之路&#x1f4dd; 项目概述&#x1f3d7;️ 技术架构设计后端技术栈前端技术栈 &#x1f4a1; 核心功能特性1. 用户管理模块2. 权限管理系统3. 统计报表功能4. 用户体验优化 &#x1f5c4;️ 数据库设…...






编程新知
2025/10/23 14:10:35



















【生成模型】视频生成论文调研




工作清单 
上游应用方向&#xff1a;控制、速度、时长、高动态、多主体驱动 
类型工作基础模型WAN / WAN-VACE / HunyuanVideo控制条件轨迹控制ATI~镜头控制ReCamMaster~多主体驱动Phantom~音频驱动Let Them Talk: Audio-Driven Multi-Person Conversational Video Generation速…...






编程新知
2025/9/9 8:40:47



















Git 3天2K星标：Datawhale 的 Happy-LLM 项目介绍（附教程）




引言 
在人工智能飞速发展的今天&#xff0c;大语言模型&#xff08;Large Language Models, LLMs&#xff09;已成为技术领域的焦点。从智能写作到代码生成&#xff0c;LLM 的应用场景不断扩展&#xff0c;深刻改变了我们的工作和生活方式。然而&#xff0c;理解这些模型的内部…...






编程新知
2025/12/25 22:23:23



















android13 app的触摸问题定位分析流程




一、知识点 一般来说，触摸问题都是app层面出问题，我们可以在ViewRootImpl.java添加log的方式定位；如果是touchableRegion的计算问题，就会相对比较麻烦了，需要通过adb shell dumpsys input > input.log指令，且通过打印堆栈的方式，逐步定位问题，并找到修改方案。 
问题…...






编程新知
2025/12/2 1:15:53



















WPF八大法则：告别模态窗口卡顿




⚙️ 核心问题&#xff1a;阻塞式模态窗口的缺陷 
原始代码中ShowDialog()会阻塞UI线程&#xff0c;导致后续逻辑无法执行&#xff1a; 
var result  modalWindow.ShowDialog();  // 线程阻塞
ProcessResult(result);                  // 必须等待窗口关闭根本问题&#xff1a…...






编程新知
2025/12/26 3:45:03



















c# 局部函数 定义、功能与示例




C# 局部函数&#xff1a;定义、功能与示例 
1. 定义与功能 局部函数&#xff08;Local Function&#xff09;是嵌套在另一个方法内部的私有方法&#xff0c;仅在包含它的方法内可见。 • 作用&#xff1a;封装仅用于当前方法的逻辑&#xff0c;避免污染类作用域&#xff0c;提升…...






编程新知
2025/9/18 4:17:51