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

Canvas实现截图

news 2026/5/12 5:39:01 
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>canvas实现截图功能</title><style>.canvas-box,.canvas2-box{display: none;}</style>
</head>
<body><!-- 文件读取 --><div><input  type="file" id="file" accept="image/*" /></div><canvas id="canvas-node" class="canvas-box"></canvas><button id="downBtn">down</button><div class="canvas2-box"><canvas id="canvas2"></canvas></div>
</body>
<script>// 获取canvas节点let canvasNode = document.getElementById("canvas-node")// 创建上下文let ctx = canvasNode.getContext("2d")let downBtn =  document.getElementById("downBtn")let canvas2Box = document.querySelector(".canvas2-box")let canvas2 = document.getElementById("canvas2")let ctx2 = canvas2.getContext("2d")// 获取文件节点let fileNode = document.getElementById("file")// 给文件节点注册事件fileNode.addEventListener("change", readFile)// 图像源let img = new Image();// 截图区域的数据let screenshotData = []let fileType = "" // 文件的类型,下载的时候需要// 注册事件用于得到鼠标按下时的偏移量canvasNode.addEventListener("mousedown", mousedownInCanvasHandler)let currentPoint = {}// 注册下载事件downBtn.addEventListener('click',()=>{let {width, height} = canvas2// format:表示的是图片的类型  "image/png"// toDataURL的第一个参数：图片格式，默认为 image/png,// 第2个参数：可以从 0 到 1 的区间内选择图片的质量。如果超出取值范围，将会使用默认值 0.92。其他参数会被忽略。let imgURL = canvas2.toDataURL( fileType, 1);let link = document.createElement('a');link.download = "截图图片";link.href = imgURL;document.body.appendChild(link);link.click();document.body.removeChild(link);})// 鼠标按下function mousedownInCanvasHandler(e){currentPoint= { x: e.offsetX, y: e.offsetY }// 按下鼠标的时候我们需要注册移动事件和抬起事件canvasNode.addEventListener('mousemove', mousemoveInCanvasHandler)canvasNode.addEventListener('mouseup', mouseupInCanvasHandler)}// 绘制矩形function mousemoveInCanvasHandler(e){let rectEndX = e.offsetXlet rectEndY = e.offsetY// 得到矩形的宽度和高度let rectWidth = rectEndX - currentPoint.xlet rectHeight = rectEndY - currentPoint.ylet {width, height} = canvasNode// 将截图区域的数据保存下来screenshotData= [currentPoint.x, currentPoint.y, rectWidth, rectHeight]ctx.clearRect(0, 0, width, height)// 绘制蒙层drawMask(0,0,width, height);drawScreenShot(width, height,rectWidth, rectHeight)}// 绘制截图function drawScreenShot( canvasWidth, canvasHeight,rectWidth,rectHeight){// 在原图形之外画出一个矩形ctx.globalCompositeOperation = "destination-out";ctx.fillStyle='#000'ctx.fillRect(currentPoint.x, currentPoint.y,rectWidth,rectHeight)ctx.globalCompositeOperation ='destination-over'// 绘制截图区域的矩形ctx.drawImage(img, 0, 0,canvasWidth, canvasHeight,0,0,canvasWidth, canvasHeight );}// 鼠标抬起的时候要移除移动事件和抬起事件function mouseupInCanvasHandler(e){canvasNode.removeEventListener('mousemove', mousemoveInCanvasHandler)canvasNode.removeEventListener('mouseup', mouseupInCanvasHandler)drawScreenShotImg(screenshotData)}// 绘制一个截图区域的信息在另外一个画布上，并且将他显示出来function drawScreenShotImg(screenshotData){// screenshotData是截图的开始和结束坐标let drawData = ctx.getImageData(...screenshotData)canvasSetWH(canvas2Box,screenshotData[2],screenshotData[3])canvasSetWH(canvas2,screenshotData[2],screenshotData[3])// 先清空画布，注意清空的大小，否者会造成叠加（清除不干净）ctx2.clearRect(0,0, currentPoint.x, currentPoint.y)// 将截图区域绘制到canvas2上ctx2.putImageData(drawData,0,0)}// 读取文件function readFile(e){let file = e.target.files[0]// 得到图片的类型，等会下载的时候需要console.log('file.type', file.type)fileType = file.typegetImageWH(file, function(width, height) {  // 将宽度和高度传给canvasSetWH函数，显示在页面上canvasSetWH(canvasNode,width, height)ctx.drawImage(img, 0, 0,width, height );// 调用绘制蒙层的方法drawMask(0,0,width, height);});}// 返回文件(图片的宽和高)function getImageWH(file, callback) {  // 创建一个FileReader实例  const reader = new FileReader();  // 当文件读取完成时触发  reader.onload = function(e) {  // e 这个对象中包含这个图片相关的属性console.log('e这个对象', e)// 创建一个新的Image对象  // 设置Image的src为读取到的文件内容  img.src = e.target.result;  // 当图片加载时触发  img.onload = function() {  // 调用回调函数，返回图像源，图片的宽度，高度callback(img.width, img.height);  };};// 开始读取文件内容，以DataURL的形式 // reader.onload 方法的执行需要调用下面这个 reader.readAsDataURLreader.readAsDataURL(file);  } function canvasSetWH(canvasNode,width, height){canvasNode.width = widthcanvasNode.height = heightcanvasNode.style.display = "block"}// 绘制蒙层function drawMask(x, y, width, height, opactity) {ctx.fillStyle = "rgba(0,0,0,0.5)";ctx.fillRect(x, y, width, height);}
</script>
</html>

相关文章：

Canvas实现截图

<!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><title>canvas实现截图功能</title><style>.ca…...

编程日记 2024/8/3 16:08:34

Python高性能计算：进程、线程、协程、并发、并行、同步、异步

这里写目录标题 进程、线程、协程并发、并行同步、异步I/O密集型任务、CPU密集型任务 进程、线程、协程 进程、线程和协程是计算机程序执行的三种不同方式&#xff0c;它们在资源管理、执行模型和调度机制上有显著的区别。以下是对它们的详细解释和比较&#xff1a; 进程&…...

编程日记 2024/8/3 16:07:33

kafka基本操作

Kafka详解 一、Kafka概述 Kafka是一个开源的分布式事件流平台&#xff0c;它主要用于高性能数据管道、流分析、数据集成和关键任务应用。Kafka最初被设计为一个分布式的基于发布/订阅模式的消息队列&#xff0c;但随着时间的推移&#xff0c;它已发展成为一个功能强大的流处理…...

编程日记 2024/8/3 16:06:32

JavaFX布局-Accordion

JavaFX布局-Accordion 一个可扩展的面板&#xff0c;包括标题、内容与TitledPane配合一起使用 public static Accordion demo1() {// 创建AccordionAccordion accordion new Accordion();// 内边距accordion.setPadding(new Insets(10, 10, 10, 10));for (int i 1; i < 1…...

编程日记 2024/8/3 16:05:30

【轨物方案】评估光伏组件发电性能一致性方案

光伏电站建设后运行周期长达二十多年&#xff0c;对于电站运营者来说&#xff0c;基础设施的稳定、安全、高效的运行是至关重要的。然而从近些年光伏的发展过程中看到&#xff0c;在电站规划到后期运维整个过程中可能存在着诸多问题&#xff0c;如设备选型不当、施工建设质量差…...

编程日记 2024/8/3 16:04:29

安全基础学习-keil调试汇编代码

初始目的是为了通过汇编编写CRC功能。 但是基础为0，所以目前从搭建工程开始记录。 大佬绕路。 （一）创建项目 1. 新建项目 打开 Keil uVision。选择 Project -> New uVision Project 创建一个新项目。选择你的目标设备（如 ARM Cortex-M 系列处理器），我这里一开始选择…...

编程日记 2024/8/3 16:03:27

Unity复制对象时让私有变量也被复制的简单方法

Unity复制对象时&#xff0c;如果一个变量为公共变量&#xff08;public&#xff09;&#xff0c;那么这个变量的值会被复制到新的对象中去&#xff0c;但是如果一个变量是私有变量&#xff08;private&#xff09;&#xff0c;默认是不会被复制的&#xff0c;如果希望被复制&a…...

编程日记 2024/8/3 16:02:26

Flink 实时数仓（二）【DIM 层搭建】

1、DIM 层搭建 1.1、设计要点 DIM层设计要点&#xff1a; DIM层存的是维度表&#xff08;环境信息&#xff0c;比如人、场、货等&#xff09;DIM层的数据存储在 HBase 表中DIM层表名的命名规范为dim_表名 DIM 层表是用于维度关联的&#xff0c;要通过主键&#xff08;维度外…...

编程日记 2024/8/3 16:01:25

知识图谱开启了一个可以理解的人工智能未来

概述 本文是对利用知识图谱&#xff08;KG&#xff09;的综合人工智能&#xff08;CAI&#xff09;的全面调查研究&#xff0c;其中 CAI 被定义为可解释人工智能&#xff08;XAI&#xff09;和可解释机器学习&#xff08;IML&#xff09;的超集。 首先&#xff0c;本文澄清了…...

编程日记 2024/8/3 16:00:24

借助Aspose.html控件， 将SVG 转PNG 的 C# 图像处理库

Aspose.HTML for .NET 不仅提供超文本标记语言 ( HTML ) 文件处理&#xff0c;还提供流行图像文件格式之间的转换。您可以利用丰富的渲染和转换功能将SVG文件渲染为PNG、JPG或其他广泛使用的文件格式。但是&#xff0c;我们将使用此C# 图像处理库以编程方式在 C# 中将 SVG 转换…...

编程日记 2024/8/3 15:59:23

vs-2015安装教程

双击安装包 2-如图先选自定义&#xff0c;然后选安装路径&#xff08;英文路径&#xff09; 3-安装选项一个就够了&#xff0c;如图 4-点击下一步&#xff0c;之后如下图 5-点击安装 启动&#xff0c;如图则恭喜你成功安装...

编程日记 2024/8/3 15:58:22

Stable Diffusion绘画 | 文生图设置详解—随机种子数（Seed）

随机种子数&#xff08;Seed&#xff09; Midjourney 也有同样的概念&#xff0c;通过 --seed 种子数值 来使用。 每次操作「生成」所得到的图片&#xff0c;都会随机分配一个 seed值&#xff0c;数值不同&#xff0c;生成的画面就会不同。 默认值为 -1&#xff1a;每次随机分…...

编程日记 2024/8/3 15:57:21

56、php实现N的阶乘末尾有多个0

题目&#xff1a; php实现N的阶乘末尾有多个0 描述&#xff1a; 阶乘 N! 123*…N; 比如 5! 12345 120 末端有1个0 解题思路&#xff1a; N! K*(10^M) N的阶乘为K和10的M次方的乘积&#xff0c;那么N!末尾就有M个0。如果将N的阶乘分解后&#xff0c;那么N的阶乘可以分解为&…...

编程日记 2024/8/3 15:56:20

混合域注意力机制（空间+通道）

在计算机视觉任务中&#xff0c;空间域注意力通常关注图像中不同位置的重要性&#xff0c;例如突出图像中的关键对象或区域。而通道域注意力则侧重于不同通道&#xff08;特征图&#xff09;的重要性&#xff0c;决定哪些特征对于任务更具判别力。混合域注意力机制结合了空间域…...

编程日记 2024/8/3 15:55:20

springboot长春旅游安全地图平台-计算机毕业设计源码90075

摘 要 本文详细阐述了基于微信小程序前端和Spring Boot后端框架的长春旅游安全地图平台的设计思路与实现过程。该平台旨在为长春游客提供安全、便捷的旅游服务&#xff0c;同时为旅游管理部门提供高效的信息管理和应急响应机制。 在平台设计上&#xff0c;我们充分考虑了用户体…...

编程日记 2024/8/3 15:53:14

apex正则表达式匹配富文本字段内容，如何只匹配文本而忽略富文本符号

在Apex中处理富文本字段时&#xff0c;如果你只想匹配其中的纯文本而忽略富文本符号&#xff0c;可以使用正则表达式来去除HTML标签&#xff0c;然后再进行文本匹配。以下是一个示例代码&#xff0c;展示了如何实现这一点&#xff1a; public class RichTextHandler {// Funct…...

编程日记 2024/8/3 15:52:11

空气净化器对去除宠物毛有效吗？小型猫毛空气净化器使用感受

作为一个养猫多年的猫奴&#xff0c;家里有两只可爱的小猫咪&#xff1a;小白和小花。虽然相处起来很开心&#xff0c;但也给生活带来了一些小麻烦。谁懂啊&#xff0c;我真的受够了&#xff0c;每天都在粘毛。猫窝的猫毛一周不清理就要堆成山&#xff0c;空气中也全是浮毛&…...

编程日记 2024/8/3 15:47:06

vue的nextTick是下一次事件循环吗

如题&#xff0c;nextTick的回调是在下一次事件循环被执行的吗&#xff1f; 是不是下一次事件循环取决于nextTick的实现&#xff0c;如果是用的微任务&#xff0c;那么就是本次事件循环&#xff1b;否则如果用的是宏任务&#xff0c;那么就是下一次事件循环。 我们看下Vue3中…...

编程日记 2024/8/3 15:46:05

5.4.软件工程-系统设计

考试占比不高 概述 系统设计的主要目的就是为系统制定蓝图&#xff0c;在各种技术和实施方法中权衡利弊&#xff0c;精心设计&#xff0c;合理地使用各种资源&#xff0c;最终勾画出新系统的详细设计方案。系统设计的主要内容包括新系统总体结构设计、代码设计、输出设计、输…...

编程日记 2024/8/3 15:44:02

Apache Kylin与BI工具集成：数据可视化实战

Apache Kylin与BI工具集成&#xff1a;数据可视化实战 1. 引言 Apache Kylin是一个开源的分布式分析引擎&#xff0c;专注于大数据的OLAP&#xff08;在线分析处理&#xff09;。它可以快速地对大量数据进行多维分析&#xff0c;并支持与多种BI&#xff08;商业智能&#xff…...

编程日记 2024/8/3 15:43:01

10x-bench-eval：量化开发效率的基准测试框架设计与实践

1. 项目概述&#xff1a;当“10倍速”遇上“基准测试”在软件工程领域&#xff0c;“10倍速工程师”是一个充满争议又令人神往的概念。它描述的是一种理想状态&#xff1a;一位工程师凭借其卓越的工具链、深刻的问题洞察力以及高效的自动化能力&#xff0c;其产出效率能达到普通…...

编程新知 2026/5/12 5:16:38

基于Agent-Next框架的Polymarket模拟交易机器人构建指南

1. 项目概述与核心价值最近在逛GitHub的时候&#xff0c;发现了一个挺有意思的项目&#xff0c;叫agent-next/polymarket-paper-trader。光看这个名字&#xff0c;可能很多朋友会有点懵&#xff0c;这到底是个啥&#xff1f;简单来说&#xff0c;这是一个基于agent-next框架&am…...

编程新知 2026/5/12 4:45:29

如何快速掌握雀魂Mod Plus：解锁全角色皮肤的新手完全指南

如何快速掌握雀魂Mod Plus&#xff1a;解锁全角色皮肤的新手完全指南 【免费下载链接】majsoul_mod_plus 雀魂解锁全角色、皮肤、装扮等&#xff0c;支持全部服务器。 项目地址: https://gitcode.com/gh_mirrors/ma/majsoul_mod_plus 还在为无法获得心仪角色和皮肤而烦恼…...

编程新知 2026/5/12 2:49:20

VCSA 7.0 报 vAPI Endpoint 黄灯告警？别慌，这份保姆级排查与修复指南帮你搞定

VCSA 7.0 vAPI Endpoint黄灯告警全流程诊断手册 凌晨三点&#xff0c;监控系统突然弹出一条告警——vCenter Server的vAPI Endpoint服务状态由绿转黄。作为运维负责人&#xff0c;你需要在最短时间内判断这是需要立即处理的严重故障&#xff0c;还是可以暂缓的偶发异常。本文将…...

编程新知 2026/5/12 2:03:04

手把手教你用Gstreamer和V4L2在Zynq MPSoC上搭建视频流Pipeline（HDMI IN to DP OUT）

从HDMI到DP&#xff1a;Zynq MPSoC视频流处理全链路实战指南 当你的Zynq MPSoC开发板已经完成硬件设计&#xff0c;Petalinux系统也顺利启动&#xff0c;却发现HDMI输入的视频信号无法正确显示在DP接口的显示器上——这种"最后一公里"的集成问题往往最令人抓狂。本文…...

编程新知 2026/5/12 1:54:37

文献阅读 260511-Wildfire damages and the cost-effective role of forest fuel treatments

Wildfire damages and the cost-effective role of forest fuel treatments 来自 <https://www.science.org/doi/10.1126/science.aea6463> ## Abstract: Gave the core question: Wildfires are among the most pressing environmental challenges of the 21st century,…...

编程新知 2026/5/12 1:33:50

被AI欺骗啦：一个有趣的三极直接耦合放大电路的调整

简 介&#xff1a; 本文探讨了一个三极直接耦合放大电路的设计问题。初始使用AI工具设计的电路参数看似可行&#xff0c;但仿真显示Q1晶体管处于异常工作状态&#xff08;BC结正向偏置&#xff09;。通过重新调整电阻参数&#xff0c;特别是将反馈电阻R8设为10MΩ后&#xff0c…...

编程新知 2026/5/12 0:09:00

视频字幕提取神器：如何让AI帮你自动转录硬字幕？

视频字幕提取神器&#xff1a;如何让AI帮你自动转录硬字幕&#xff1f; 【免费下载链接】video-subtitle-extractor 视频硬字幕提取&#xff0c;生成srt文件。无需申请第三方API&#xff0c;本地实现文本识别。基于深度学习的视频字幕提取框架&#xff0c;包含字幕区域检测、字…...

编程新知 2026/5/11 23:27:16

面试被问烂的20道编程基础题，你必须全会，不然别去面试

文章目录前言一、Python基础篇&#xff08;6道&#xff09;1. Python中list和tuple有什么区别&#xff1f;2. Python 3.7之后普通dict已经有序了&#xff0c;那OrderedDict还有存在的必要吗&#xff1f;3. Python中的深拷贝和浅拷贝有什么区别&#xff1f;4. Python中的*args和…...

编程新知 2026/5/11 23:14:04

MILCOM 2011技术风向：软件定义无线电、GaN与宽带测试的军用射频演进

1. 展会现场直击&#xff1a;MILCOM 2011的技术脉搏作为一名在射频微波和测试测量领域摸爬滚打了十几年的工程师&#xff0c;我对MILCOM&#xff08;军事通信会议&#xff09;这类展会总有一种特殊的感情。它不像那些消费电子展那样光鲜亮丽&#xff0c;人头攒动&#xff0c;但…...

编程新知 2026/5/11 22:47:38