js实现框选截屏功能

已于 2023-08-01 18:03:29 修改
阅读量1.1k 收藏 3
点赞数 1
文章标签： javascript 前端 css
于 2023-07-27 11:27:28 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/woyebuzhidao321/article/details/131956306
版权

实现的思路大概就是，先将dom转化为canvas画布，再对canvas进行裁切，然后通过canvas api生成图片，这里用到了一个库html2canvas

效果如图：
在这里插入图片描述
首先实现框选效果：

const mousedownEvent = (e) => {
	moveX = 0;
	moveY = 0;
	const [startX, startY] = [e.clientX, e.clientY];
	x = startX - viewer.getBoundingClientRect().left;
	y = startY - viewer.getBoundingClientRect().top;
	const divDom = document.createElement("div");
	divDom.id = 'screenshot';
	divDom.width = '1px';
	divDom.height = '1px';
	divDom.style.position = "absolute";
	divDom.style.top = y + "px";
	divDom.style.left = x + "px";
	const closeIcon = document.createElement("span");
	closeIcon.className = 'outline-close-icon';
	closeIcon.textContent = 'x';
	divDom.appendChild(closeIcon);

	closeIcon.addEventListener('click', () => {
		divDom.remove();
	});
	// document.body.appendChild(divDom)
	viewer.appendChild(divDom);
	const moveEvent = (e) => {
		moveX = e.clientX - startX;
		moveY = e.clientY - startY;
		if (moveX > 0) {
			divDom.style.width = moveX + 'px';
		} else {
			divDom.style.width = -moveX + 'px';
			divDom.style.left = e.clientX - viewer.getBoundingClientRect().left + 'px';
		}
		if (moveY > 0) {
			divDom.style.height = moveY + 'px';
		} else {
			divDom.style.height = -moveY + 'px';
			divDom.style.top = e.clientY - viewer.getBoundingClientRect().top + 'px';
		}
	};
	window.addEventListener("mousemove", moveEvent);
	window.addEventListener("mouseup", () => {
		window.removeEventListener("mousemove", moveEvent);
		window.removeEventListener("mousedown", mousedownEvent);
		document.querySelector("body").style.cursor = "default";
	});
};
window.addEventListener("mousedown", mousedownEvent);

全码：

const viewer = document.getElementById('viewer');

document.getElementById('screen-button').addEventListener('click', (e) => {

	document.querySelector("body").style.cursor = "crosshair";
	let moveX;
	let moveY;
	let x;
	let y;
	const mousedownEvent = (e) => {
		moveX = 0;
		moveY = 0;
		const [startX, startY] = [e.clientX, e.clientY];
		x = startX - viewer.getBoundingClientRect().left;
		y = startY - viewer.getBoundingClientRect().top;
		const divDom = document.createElement("div");
		divDom.id = 'screenshot';
		divDom.width = '1px';
		divDom.height = '1px';
		divDom.style.position = "absolute";
		divDom.style.top = y + "px";
		divDom.style.left = x + "px";
		const closeIcon = document.createElement("span");
		closeIcon.className = 'outline-close-icon';
		closeIcon.textContent = 'x';
		divDom.appendChild(closeIcon);

		closeIcon.addEventListener('click', () => {
			divDom.remove();
		});
		// document.body.appendChild(divDom)
		viewer.appendChild(divDom);
		const moveEvent = (e) => {
			moveX = e.clientX - startX;
			moveY = e.clientY - startY;
			if (moveX > 0) {
				divDom.style.width = moveX + 'px';
			} else {
				divDom.style.width = -moveX + 'px';
				divDom.style.left = e.clientX - viewer.getBoundingClientRect().left + 'px';
			}
			if (moveY > 0) {
				divDom.style.height = moveY + 'px';
			} else {
				divDom.style.height = -moveY + 'px';
				divDom.style.top = e.clientY - viewer.getBoundingClientRect().top + 'px';
			}
		};
		window.addEventListener("mousemove", moveEvent);
		window.addEventListener("mouseup", () => {

			window.removeEventListener("mousemove", moveEvent);
			window.removeEventListener("mousedown", mousedownEvent);
			document.querySelector("body").style.cursor = "default";

			if (!moveX) {
				return;
			}

			// 把body转成canvas
			html2canvas(viewer, {
				scale: 1,
				// allowTaint: true,
				useCORS: true  //跨域使用
			}).then(canvas2 => {
				let capture_x, capture_y;
				let width = moveX;
				let height = moveY;
				if (width > 0) {
					//从左往右画
					capture_x = startX - canvas.getBoundingClientRect().left + 1;
				} else {
					//从右往左画
					capture_x = x + width + 1;
				}
				if (height > 0) {
					//从上往下画
					capture_y = y + 1;
				} else {
					//从下往上画
					capture_y = y + height + 1;
				}
				printClip(canvas2, capture_x, capture_y, Math.abs(width), Math.abs(height));

				moveX = 0;
		
			});
		});
	};
	window.addEventListener("mousedown", mousedownEvent);
});

/**
 * 打印截取区域
 * @param canvas 截取的canvas
 * @param capture_x 截取的起点x
 * @param capture_y 截取的起点y
 * @param capture_width 截取的起点宽
 * @param capture_height 截取的起点高
 */
async function printClip(canvas2, capture_x, capture_y, capture_width, capture_height) {
	// 创建一个用于截取的canvas
	const clipCanvas = document.createElement('canvas');
	clipCanvas.width = capture_width;
	clipCanvas.height = capture_height;
	// 截取
	clipCanvas.getContext('2d').drawImage(canvas2, capture_x, capture_y, capture_width, capture_height, 0, 0, capture_width, capture_height);
	const clipImgBase64 = clipCanvas.toDataURL();
	// console.log('clipImgBase64->', clipImgBase64);
	// console.log('clipImgBase64->', clipImgBase64.replace(/^data:image\/\w+;base64,/, ""));
	const obj = {
		// file: new File([this.blob],'main.audio',{ type: 'audio/mp3' })
		file: new File([base64ToBlob(clipImgBase64.replace(/^data:image\/\w+;base64,/, ""), 'image/png')], 'test.png', { type: 'image/png' })
	};
	// 生成图片
	// var clipImg = new Image()
	// clipImg.src = clipImgBase64
	downloadIamge(clipImgBase64)
}

/**
 * 下载保存图片
 * @param imgUrl 图片地址
 */
function downloadIamge(imgUrl) {
	// 生成一个a元素
	const a = document.createElement('a');
	// 创建一个单击事件
	const event = new MouseEvent('click');
	// 生成文件名称
	const timestamp = new Date().getTime();
	const name = imgUrl.substring(22, 30) + timestamp + '.png';
	a.download = name;
	// 将生成的URL设置为a.href属性
	a.href = imgUrl;
	// 触发a的单击事件 开始下载
	a.dispatchEvent(event);
}

// 将Base64编码转换为Blob对象
function base64ToBlob(base64, type) {
	const byteCharacters = atob(base64);
	const byteArrays = [];

	for (let offset = 0; offset < byteCharacters.length; offset += 512) {
		let slice = byteCharacters.slice(offset, offset + 512);

		let byteNumbers = new Array(slice.length);
		for (let i = 0; i < slice.length; i++) {
			byteNumbers[i] = slice.charCodeAt(i);
		}

		let byteArray = new Uint8Array(byteNumbers);
		byteArrays.push(byteArray);
	}

	let blob = new Blob(byteArrays, { type: type });
	return blob;
}

坑：

  1. 如果生成图片样式有问题 html就用内联样式
  2. 当截图片的时候如果不识别 就将图片url转化为base64
  3. 当遇到超长截图的时候会失败，下面我详细讲下

我们截图的原理是将页面都绘制到了canvas上，但是这里canvas在不同浏览器中高度都是有限制的，而且不同浏览器 限制不一样，这样导致长篇幅的pdf页面绘制不了canvas，解决方式给一个最大高度限制，并且从可视区域开始截图，这样不管pdf预览页面再长 都可以去做框选截图了。

const viewer = document.getElementById('viewer');
		document.getElementById('screen-button').addEventListener('click', (e) => {

			document.querySelector("body").style.cursor = "crosshair";
			let moveX;
			let moveY;
			let x;
			let y;
			const mousedownEvent = (e) => {
				moveX = 0;
				moveY = 0;
				const [startX, startY] = [e.clientX, e.clientY];
				x = startX - viewer.getBoundingClientRect().left;
				y = startY - 64;
				const divDom = document.createElement("div");
				divDom.id = 'screenshot';
				divDom.width = '1px';
				divDom.height = '1px';
				divDom.style.position = "absolute";
				divDom.style.top = y + "px";
				divDom.style.left = x + "px";
				const closeIcon = document.createElement("span");
				closeIcon.className = 'outline-close-icon';
				closeIcon.textContent = 'x';
				divDom.appendChild(closeIcon);

				closeIcon.addEventListener('click', () => {
					divDom.remove();
				});
				// document.body.appendChild(divDom)
				viewer.appendChild(divDom);
				const moveEvent = (e) => {
					moveX = e.clientX - startX;
					moveY = e.clientY - startY;
					if (moveX > 0) {
						divDom.style.width = moveX + 'px';
					} else {
						divDom.style.width = -moveX + 'px';
						divDom.style.left = e.clientX - viewer.getBoundingClientRect().left + 'px';
					}
					if (moveY > 0) {
						divDom.style.height = moveY + 'px';
					} else {
						divDom.style.height = -moveY + 'px';
						divDom.style.top = e.clientY - viewer.getBoundingClientRect().top + 'px';
					}
				};
				window.addEventListener("mousemove", moveEvent);
				window.addEventListener("mouseup", () => {

					window.removeEventListener("mousemove", moveEvent);
					window.removeEventListener("mousedown", mousedownEvent);
					document.querySelector("body").style.cursor = "default";

					if (!moveX) {
						return;
					}
					// 把body转成canvas
					html2canvas(viewer, {
						scale: 1,
						height: (viewer.offsetHeight > 60000 ? 60000 : viewer.offsetHeight),
						width: viewer.scrollWidth,
						x: 0,
						y: document.getElementById('viewerContainer').scrollTop, // 用网页滚动的高度定位y轴顶点
						// dpi: 300,
						// allowTaint: true,
						useCORS: true,  //跨域使用
					}).then(canvas2 => {
						// document.body.append(canvas2);

						let capture_x, capture_y;
						let width = moveX;
						let height = moveY;
						if (width > 0) {
							//从左往右画
							capture_x = x + 1;
						} else {
							//从右往左画
							capture_x = x + width + 1;
						}
						if (height > 0) {
							//从上往下画
							capture_y = y + 1;
						} else {
							//从下往上画
							capture_y = y + height + 1;
						}
						printClip(canvas2, capture_x, capture_y, Math.abs(width), Math.abs(height));

						moveX = 0;
					});
				});
			};
			window.addEventListener("mousedown", mousedownEvent);
		});
拾荒李
关注
  • 1
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
js 页面截图三种解决方案
Caoshilong1的博客
11-30 3817
3、让使用者在浏览器插件再去调用插件（不推荐）2、获取屏幕流转为图片。
在web端快速实现选区截图功能（region-screenshot-js）
最新发布
beforeSend的博客
05-22 1099
本文介绍如何通过插件region-screenshot-js来简洁高效的在web端实现选区截图功能，并在截图上绘制出特定图案和马赛克或者自定义图案。
js 实现截图
淮右布衣的博客
11-06 1380
js 实现截屏功能
js根据坐标截取图片区域
a1812806477的博客
02-09 798
【代码】js根据坐标截取图片区域
记录--使用 JS 实现基本的截图功能
林恒的博客
08-09 915
这里给大家分享我在网上总结出来的一些知识，希望对大家有所帮助 思路分析 在开始动手之前，分析一下整个功能的实现过程： 根据图片大小创建 canvas1 画布，并将原图片直接定位在 canvas1 上； 在画布上添加一个蒙层，以区分当前 canvas 图像是被裁剪的原图像； 在蒙层上方，对裁剪区域(鼠标移动形成的矩形范围)再次进行图像绘制； 获取裁剪区域的数据，并将该数据定位到...
JavaScript实现浏览器特定区域截屏和下载功能，前端面试心得必备技能储备详解
m0_55030688的博客
03-30 1120
面试前要精心做好准备，简历上写的知识点和原理都需要准备好，项目上多想想难点和亮点，这是面试时能和别人不一样的地方。还有就是表现出自己的谦虚好学，以及对于未来持续进阶的规划，企业招人更偏爱稳定的人。万事开头难，但是程序员这一条路坚持几年后发展空间还是非常大的，一切重在坚持。为了帮助大家更好更高效的准备面试，特别整理了《前端工程师面试手册》电子稿文件。前端面试题汇总JavaScript性能linux前端资料汇总。
前端页面截图，指定区域截图
weixin_43654374的博客
04-09 6141
前言 由于业务需要,需要将页面的指定区域保存为一张图片(其实就是一个很华丽呼哨的表格,前端我画出来了，后端没搞出来，后面就改需求为前端导出为图片,手动狗头一波…) 准备 使用 html2canvas 这个插件，还是很不错的东西,安利一波 npm install html2canvas yarn add html2canvas 代码 抽了两个函数,看着用吧，应该是没啥问题的。（ps：让你传选择器就传...
js实现鼠标拉框截图
09-12
在JavaScript（简称JS）编程中，实现鼠标拉框截图是一项常见的功能，特别是在Web应用中，如在线编辑器、协作工具等。这个功能的核心是通过监听鼠标事件，结合HTML5的Canvas API来完成图像的选择和捕获。以下是实现这...
ant design实现圈选功能
10-15
ant design下运用js实现框选功能，这篇文章主要介绍了ant design实现圈选功能,本文通过实例代码截图的形式给大家介绍的非常详细，需要的朋友可以参考下
复选框选择/全选&&右键功能的实现
05-28
这边主要实现的功能是选择table的td可以选择当前的记录,同时，实现右键功能，右键的插件是vscontext.jquery.js，右键的话，只实现一级。 界面截图的传送门： ...
js截图工具
05-04
js截图工具使用 html5 canvas,支持手机移动端，js截图工具使用 html5 canvas,支持手机移动端
JS实现截屏
11-25
工作中有个项目需要将地图截屏以彩信方式发送给用户。用的是百度的JS版API，由于百度API未提供截屏功能，便自己动手写，用网页调用APPLET方式实现。附代码，提供JSP和HTML两个版本。亲测可用，觉得有用的请顶！ PS： 1、保证D盘有个img目录或者自己修改代码自动创建文件夹； 2、在客户端的JRE中对APPLET进行授权，即在...Java\jre1.5.0\lib\security的java.policy文件中加上permission java.security.AllPermission;
JS实现截图功能
06-05
var Class = { create: function() { return function() { this.initialize.apply(this, arguments); } } }
js cavans截图，指定元素截图
09-06
这是一个通过cavans局部截图的实例，通过指定元素截取目标html样式，不需要手动拖动等操作，直接出发调用即可，可根据自己业务进行修改
拉框实现屏幕截屏
01-13
通过这些技术和方法，我们可以构建一个功能完善的拉框截屏工具，类似于QQ截图，提供用户友好的界面和高效的截图体验。对于开发者来说，了解这些知识点不仅可以提高工作效率，也能为用户提供更加便捷的操作方式。
Vue+element+cookie记住密码功能的简单实现方法
10-14
本文将详细介绍如何在Vue.js框架下，结合Element UI库和Cookie技术，实现这一功能。 1. **Vue.js基础知识**： Vue.js是一个轻量级的JavaScript框架，用于构建用户界面。它提供了声明式的数据绑定和组件化，使得创建...
JS实现根据Dom实现截图
why404
09-08 1699
JS实现截图保存pdf
JavaScript传说中的图片截取（只显示一张图片的某个部分）
hanyue198528的专栏
05-23 6019
我们需要截取图片的一部分（也就是把图片的其他部分隐藏）我们可以把这张图片放到一个层中，通过控制层的大小从而控制将要显示的区域大小，样式如下div{    position:absolute;    width:32px; //宽度    height:48px;//高度    overflow:hidden;//其他部分隐藏   } 然后在函数（function）里通过scro
c# 实现框选截图功能
05-19
以下是 C# 实现框选截图功能的代码示例： ```csharp using System; using System.Drawing; using System.Windows.Forms; public class ScreenCapture : Form { private Point start; private Rectangle rect; public ScreenCapture() { this.DoubleBuffered = true; this.FormBorderStyle = FormBorderStyle.None; this.WindowState = FormWindowState.Maximized; this.Cursor = Cursors.Cross; this.MouseDown += ScreenCapture_MouseDown; this.MouseMove += ScreenCapture_MouseMove; this.MouseUp += ScreenCapture_MouseUp; } protected override void OnPaint(PaintEventArgs e) { base.OnPaint(e); using (Pen pen = new Pen(Color.Red, 2)) { e.Graphics.DrawRectangle(pen, rect); } } private void ScreenCapture_MouseDown(object sender, MouseEventArgs e) { start = new Point(e.X, e.Y); rect = new Rectangle(start, Size.Empty); } private void ScreenCapture_MouseMove(object sender, MouseEventArgs e) { if (e.Button == MouseButtons.Left) { Point current = new Point(e.X, e.Y); rect.Location = new Point( Math.Min(start.X, current.X), Math.Min(start.Y, current.Y)); rect.Size = new Size( Math.Abs(start.X - current.X), Math.Abs(start.Y - current.Y)); Invalidate(); } } private void ScreenCapture_MouseUp(object sender, MouseEventArgs e) { if (rect.Width > 0 && rect.Height > 0) { using (Bitmap bitmap = new Bitmap(rect.Width, rect.Height)) { using (Graphics graphics = Graphics.FromImage(bitmap)) { graphics.CopyFromScreen(rect.Location, Point.Empty, rect.Size); } Clipboard.SetImage(bitmap); MessageBox.Show("截图已复制到剪贴板。"); } } Close(); } public static void Main() { Application.Run(new ScreenCapture()); } } ``` 这个程序创建了一个全屏的窗体，并在窗体上绘制了一个红色的矩形，用于框选截图。当用户按下鼠标左键并拖动时，矩形会跟随鼠标移动。当用户释放鼠标左键时，程序会将框选区域的屏幕截图复制到剪贴板，并关闭窗体。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值