使用html2canvas库实现一个简单截图功能，还需优化

最新推荐文章于 2024-07-07 03:28:00 发布
最新推荐文章于 2024-07-07 03:28:00 发布
阅读量1.2k 收藏 2
点赞数
分类专栏： js 工具 文章标签： js html截图 html2canvas
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_37902949/article/details/81056199
版权
工具 同时被 2 个专栏收录
5 篇文章 0 订阅
订阅专栏
js
2 篇文章 0 订阅
订阅专栏

  以前兴趣写的一个简单html截图功能，现在分享出来，参考。

  使用html2canvas库实现，功能简单，待优化。。。

  效果图：

   

 

功能简单，代码也简单。。

1、需要html2canvas库，自己找个或者在下面下载

2、主要实现代码SnippingTool.js

/**
 * Create by 广信-zhoujie
 * Create Date 2018/3/29 16:19
 * Describe 截图工具
 * Version 1.0
 */

//开启截图
var psnode;//截图节点
function startPrintps(node){
	psnode = node;
	if($("#psbg").length > 0){
		$("#psbg").css("display", "block");
	}else{
		//创建截图面板并添加到body节点最后面
		var printpsPanel = '<div id="psbg"><div id="printrange"><div id="printfull"><div id="printcontent"></div><ul id="printbtn"><li><a onclick="closeps(event)">关闭</a></li><li style="display: none;"><a id="downloadps" onclick="closeps(event)">下载图片</a></li><li><a onclick="resetps(event)">重置</a></li><li><a onclick="completeps(event)">完成</a></li></ul></div></div></div>';
		$(document.body).append(printpsPanel);
		//赋值样式
		var w = $(window).width();
		var h = $(window).height();
		$("#psbg").attr("style", "margin:0;padding:0;z-index: 19950529;display: block;width: "+(w-4)+"px;height: "+(h-4)+"px;background: transparent;overflow: hidden;position: absolute;top: 0px;left: 0px;border: 2px solid #0066FF;");
		$("#psbg #printrange").attr("style", "margin:0;padding:0;z-index: 19950529;width: 0px;height: 0px;box-shadow: rgba(59,59,59,0.5) 0 0 0 2018px;display: inline-block;position: absolute;left: 30%;top: 30%;cursor: move;border: 1px solid #CC0000;");
		$("#psbg #printfull").attr("style", "margin:0;padding:0;width: 100%;height: 100%;position: relative;");
		$("#psbg #printcontent").attr("style", "margin:0;padding:0;width: 100%;height: 100%;position: absolute;left: 0px;top: 0px;");
		$("#psbg #printbtn").attr("style", "margin:0;padding:0;display: none;z-index: 1004;font-size: 14px;position: absolute;top: 0px;left: 0px;background-color: #0066FF;");
		$("#psbg #printbtn li").attr("style", "margin:0;padding:0;display: block;float: left;padding:5px;width: 32px;");
		$("#psbg #printbtn li:nth-child(2)").css("display", "none");
		$("#psbg #printbtn li:nth-child(2)").css("width", "58px");
		$("#psbg #printbtn li a").attr("style", "margin:0;padding:0;cursor: pointer;color: #FFF;text-decoration: none;");
	}
	pointToRecDrag(document.getElementById("printrange"));//注册截图事件
}
//完成截图
function completeps(e){
	isCanDrag = false;//禁止拖拽
	e.stopPropagation();//阻止冒泡
	removeSetNodeEvent(document.getElementById("printrange"), 'onmousedown', drag);//注销事件
	//生成图片
	var prleft = $("#printrange").css("left");
	var prtop = $("#printrange").css("top");
	var startx = prleft.substring(0, prleft.length-2);
	var starty = prtop.substring(0, prtop.length-2);
	var imgw = $("#printrange").width();
	var imgh = $("#printrange").height();
	convertTHtml2Canvas(startx, starty, imgw, imgh);
	//显示按钮				
	$.each($("#printbtn li"), function(index, obj){
		$(obj).css("display", "none");
	});
	$("#printbtn li:first-child").css("display", "block");
	$("#printbtn li:nth-child(2)").css("display", "block");
	$("#printbtn").css("left", ($("#printrange").width()-110) + "px");
}
//关闭截图
function closeps(e){
	isCanDrag = true;//允许拖拽
	e.stopPropagation();//阻止冒泡
	removeSetNodeEvent(document.getElementById("printrange"), 'onmousedown', drag);//注销事件
	$("#printbtn").css("display", "none");
	//显示按钮				
	$.each($("#printbtn li"), function(index, obj){
		$(obj).css("display", "block");
	});
	$("#printbtn li:nth-child(2)").css("display", "none");
	$("#printbtn").css("left", ($("#printrange").width()-120) + "px");
	$("#printrange").css("width", "0px");
	$("#printrange").css("height", "0px");
	//还原背景
	$("#printcontent").css("background", "none");
	$("#psbg").css("background", "none");
	$("#psbg").css("display", "none");
}
//重置
function resetps(e){
	isCanDrag = true;//允许拖拽
	e.stopPropagation();//阻止冒泡
	removeSetNodeEvent(document.getElementById("printrange"), 'onmousedown', drag);//注销事件
	$("#printbtn").css("display", "none");
	//显示按钮				
	$.each($("#printbtn li"), function(index, obj){
		$(obj).css("display", "block");
	});
	$("#printbtn li:nth-child(2)").css("display", "none");
	$("#printbtn").css("left", ($("#printrange").width()-120) + "px");
	$("#printrange").css("width", "0px");
	$("#printrange").css("height", "0px");
	//还原背景
	$("#printcontent").css("background", "none");
	$("#psbg").css("background", "none");
	//再重新注册事件
	pointToRecDrag(document.getElementById("printrange"));
}
//Html转换Canvas
function convertTHtml2Canvas(startx, starty, imgw, imgh) { 
	$("#psbg").css("display", "none");
	html2canvas(psnode, { allowTaint: true, taintTest: true }).then(function(canvas) {
    var img = convertTCanvasToImage(canvas);//转换canvas得到img·这时img是$("#divpic")范围的
    $("#psbg").css("background", "url(" + img.src + ") no-repeat");
    $("#psbg").css("background-position", "-2px -2px");
    //img加载时···截取特定部分
    img.onload = function() {
    	$("#psbg").css("display", "block");
	    img.onload = null;
	    canvas = convertTImageToCanvas(img, Number(startx)+3, Number(starty)+3, imgw, imgh);//选定范围重新绘制canvas
    	img = convertTCanvasToImage(canvas);//canvas再转换img···截取到特定部分的图片
    	var imgsrc = img.src;//获取img的src
    	$("#printcontent").css("background", "url(" + imgsrc + ") no-repeat");
    	$("#printcontent").css("background-position", "0px 0px");
    	//下载图片
			$('#downloadps').attr('href', imgsrc); //设置路径
			$('#downloadps').attr('download', '截图.png'); //设置下载图片名称
    }
  });
}
//canvas转换图片，返回图片
function convertTCanvasToImage(canvas) {
	var image = new Image();
	image.src = canvas.toDataURL("image/png", 0.1);
	return image;
}
//图片转换canvas，返回canvas
function convertTImageToCanvas(image, startX, startY, width, height) {
	var canvas = document.createElement("canvas");
	canvas.width = width;
	canvas.height = height;
	canvas.getContext("2d").drawImage(image, startX, startY, width, height, 0, 0, width, height);
	return canvas;
}
//拉框截图方法·jQuery
function pointToRecDrag(dragger){
	$("#psbg").on("mousedown", function(event){
		var w = $(window).width();
		var h = $(window).height();
		var clickX = event.pageX;
		var clickY = event.pageY;
		$(dragger).width("0px");
		$(dragger).height("0px");
		var draggerw = $(dragger).width();
		var draggerh = $(dragger).height();
		$(dragger).css("left", clickX + "px");
		$(dragger).css("top", clickY + "px");
		$("#psbg").on("mousemove", function(e){
			var mouseX = e.pageX;
			var mouseY = e.pageY;
			var difw = mouseX - clickX;//鼠标移动像素大小
			var difh = mouseY - clickY;
			if(difw<0 && difh<0){
				//向左上截图
				$(dragger).css("left", (clickX+difw) + "px");
				$(dragger).css("top", (clickY+difh) + "px");
			}else if(difw>0 && difh<0){
				//向右上截图
				$(dragger).css("top", (clickY+difh) + "px");
			}else if(difw<0 && difh>0){
				//向左下截图
				$(dragger).css("left", (clickX+difw) + "px");
			}else{
				//向右下截图
				$(dragger).css("left", clickX + "px");
				$(dragger).css("top", clickY + "px");
			}
			difw = Math.abs(difw); //取绝对值
			difh = Math.abs(difh);
			$(dragger).width(draggerw + difw + "px");
			$(dragger).height(draggerh + difh + "px");
		});
		$("#psbg").on("mouseup", function(ev){
			var mouseX = ev.pageX;
			var mouseY = ev.pageY;
			var difw = mouseX - clickX;//鼠标移动像素大小
			var difh = mouseY - clickY;
			//具体通过canvas截取img，直接赋值给dragger，然后就可以下载保存
			if(difw<0 && difh<0){
				//按钮位置
				$("#printbtn").css("left", ($(dragger).width()-127) + "px");
				$("#printbtn").css("top", ($(dragger).height()+1) + "px");
				if((mouseY + 4 + 28) > h){
					$("#printbtn").css("top", ($(dragger).height()-28) + "px");
				}
			}else if(difw>0 && difh<0){
				//按钮位置
				$("#printbtn").css("left", ($(dragger).width()-127) + "px");
				$("#printbtn").css("top", ($(dragger).height()+1) + "px");
				if((mouseY + 4 + 28) > h){
					$("#printbtn").css("top", ($(dragger).height()-28) + "px");
				}
			}else if(difw<0 && difh>0){
				//按钮位置
				$("#printbtn").css("left", ($(dragger).width()-127) + "px");
				$("#printbtn").css("top", ($(dragger).height()+1) + "px");
				if((mouseY + 4 + 28) > h){
					$("#printbtn").css("top", ($(dragger).height()-28) + "px");
				}
			}else{
				//按钮位置
				$("#printbtn").css("left", ($(dragger).width()-127) + "px");
				$("#printbtn").css("top", ($(dragger).height()+1) + "px");
				if((mouseY + 4 + 28) > h){
					$("#printbtn").css("top", ($(dragger).height()-28) + "px");
				}
			}
			$("#printbtn").css("display", "block");//按钮
			//移除截图事件
			$("#psbg").off("mousemove");
			$("#psbg").off("mousedown");
			$("#psbg").off("mouseup");
			//注册拖框事件
			dragNodeElement(document.getElementById("printrange"));
		});
	});
}
//拖拽方法·js
var isCanDrag = true;//是否允许拖拉
var drag; //拖拽对象
function dragNodeElement(dragger) {
	if(isCanDrag){
		var w = document.documentElement.clientWidth || document.body.clientWidth;
		var h = document.documentElement.clientHeight || document.body.clientHeight;
		drag = bindTNodeEvent(dragger, 'onmousedown', function(e) {
			var printrangew = $("#printrange").width();
			var printrangeh = $("#printrange").height();
			e = e || event;
			var mouseX = e.clientX || e.pageX;
			var mouseY = e.clientY || e.pageY;
			var objStyle = dragger.currentStyle || window.getComputedStyle(dragger, null);
			var objX = parseInt(objStyle.left) || 0;
			var objY = parseInt(objStyle.top) || 0;
			var limitX = mouseX - objX;
			var limitY = mouseY - objY;
			if(!dragger.onDrag) {
				dragger.onDrag = bindTNodeEvent(document, 'onmousemove', function(e) {
					e = e || event;
					dragger.style.left = ((e.clientX || e.pageX) - limitX) + 'px';
					dragger.style.top = ((e.clientY || e.pageY) - limitY) + 'px';
					if(h - ((e.clientY || e.pageY) - limitY + printrangeh + 6) < 28){
						$("#printbtn").css("top", ($(dragger).height()-28) + "px");
					}else{
						$("#printbtn").css("top", ($(dragger).height()+1) + "px");
					}
					if(parseInt(dragger.style.left) <= 2) {
						dragger.style.left = 2 + "px";
					}
					if(parseInt(dragger.style.left) >= (w - printrangew - 6)) {
						dragger.style.left = (w - printrangew - 6) + "px";
					}
					if(parseInt(dragger.style.top) >= (h - printrangeh - 6)) {
						dragger.style.top = (h - printrangeh - 6) + "px";
					}
					if(parseInt(dragger.style.top) <= 2) {
						dragger.style.top = 2 + "px";
					}
				});
				dragger.onDragEnd = bindTNodeEvent(document, 'onmouseup', function() {
					removeSetNodeEvent(document, 'onmousemove', dragger.onDrag);
					removeSetNodeEvent(document, 'onmouseup', dragger.onDragEnd);
					try {
						delete dragger.onDrag;
						delete dragger.onDragEnd;
					} catch(e) {
						dragger.removeAttribute('onDrag');
						dragger.removeAttribute('onDragEnd');
					}
				});
			}
		});
	}
}
//添加事件
function bindTNodeEvent(node, eventType, callback) {
	if(node.attachEvent) {
		if(eventType.indexOf('on')) { eventType = 'on' + eventType }
		node.attachEvent(eventType, callback);
	} else {
		if(!eventType.indexOf('on')) {
			eventType = eventType.substring(2, eventType.length);
		}
		node.addEventListener(eventType, callback, false);
	}
	return callback;
}
//移除事件
function removeSetNodeEvent(node, eventType, callback) {
	if(node.detachEvent) {
		if(eventType.indexOf('on')) { eventType = 'on' + eventType }
		node.detachEvent(eventType, callback);
	} else {
		if(!eventType.indexOf('on')) {
			eventType = eventType.substring(2, eventType.length);
		}
		node.removeEventListener(eventType, callback, false);
	}
}

 

3、简单使用demo：SnippingTool.html

 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>截图</title>
		<script src="js/jquery.2.1.4.min.js"></script>
		<script src="js/html2canvas.js"></script>
		<script src="js/SnippingTool.js"></script>
		<!-- box-shadow：http://www.w3school.com.cn/cssref/pr_box-shadow.asp -->
	</head>
	<body>
		<div id="container">
			<div id="content" style="margin: 10px;">
				<img src="img/grass.png" width="1000px" height="400px"/>
				<p>What do you do every day?What have you gained?</p>
			</div>
		</div>
		<button onclick="start()">截图</button>
	</body>
	
	<script type="text/javascript">
		function start(){
			//使用方法
			startPrintps($("body"));//截图,参数body对象
		}
	</script>
</html>

 

 

 

以上就代码了，就这样啦，仅供参考学习。。。

 

源代码下载地址：

点击下载代码

 

 

 

 

 

 

a-lofty-ideal
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
使用html2canvas库实现的简单截图功能
07-15
本文将深入探讨如何使用html2canvas库来实现这个功能。 html2canvas是一个开源的JavaScript库，它允许开发者以编程方式将HTML渲染为Canvas图像。这样，我们就可以进一步将Canvas转换为图片（如JPEG、PNG），进而...
html2canvas.js网页截图功能(解决截图不全问题)
热门推荐
Levin的技术工厂
01-12 3万+
今天来了一个新需求,需要在用户查询过后提供结果集截图功能,百度发现html2canvas.js+jquery可以解决网页截图的问题。 话不多说上代码,以下为主要功能方法 html2canvas.html<html xmlns="http://www.w3.org/1999/xhtml"> <head> <script type="text/javascript"src="jquery-1.7.2
自动截屏 html,小技巧!H5使用Html2Canvas实现自动截屏（下）
weixin_42514750的博客
05-31 356
上文写到使用html2Canvas实现截屏。上次留了一个问题，如果当前dom元素对象比较大，比如包含一个比较大的图片等，在将dom序列化成字符串时，极易导致字符串超长。对于超长的内容，后台程序将获取不到参数，那么怎么解决这个问题呢？基本实现思路有三种：1、对dom里的元素瘦身，减少序列化后的参数值长度。存在问题：对于无法再瘦身的dom怎么办？怎么体现通用性(一段代码解决大多数场景)?2、修改web...
html5截图功能
最新发布
weixin_40911634的博客
07-07 37
代码示例相关视频讲解：数组-Go代码演示HTML5截图功能简介 HTML5是一种用于构建网页的标准化技术，它不仅提供了丰富的标签和属性，还支持一些强大的功能，比如截图功能。通过HTML5的Canvas元素和一些JavaScript代码，我们可以实现网页的截图功能，方便用户在浏览网页时快速保存感兴趣的内容。 HTML5截图...
html2canvas移动端使用问题及解决
weixin_37645543的博客
01-17 2524
html2canvas在实际应用中遇到的一些问题和解决方案
解决前端html2canvas生成图片慢问题
我有一个小目标
01-11 7815
解决前端html2canvas生成图片慢问题
工作爬坑系列之html2canvas截图空白
weixin_36352085的博客
08-10 1106
开笔第一篇 工作爬坑系列之html2canvas截图空白 最近刚开始用html2canvas,发现对IE10很不友好(用啥浏览器客户说了算…呜呜呜). 问题一 第一个问题是容易出现阴影,以及截图截不全.这个问题大多出现在用了box-shadow这个样式或者有滚动条的情况下,已经有很多大神给了解决方法,大致解决思路是通过拉伸截图区域的高度以及宽度. 问题二 截图啥也没截出来,这个问题我研究了好一会儿.刚开始以为是IE10太老了,不支持这个插件,经过一番骚操作发现还是自个代码的问题,官方文档给出了很多不支持的样
js使用html2canvas实现屏幕截取的示例代码
10-19
总的来说，`html2canvas`是一个强大的工具，可以方便地实现在JavaScript环境中对HTML页面的截图功能。通过合理配置和适当的优化，可以满足大多数屏幕截取的需求。但也要注意其局限性，如处理复杂CSS样式、Web字体...
html2canvas实现js截图+模拟摄像头拍照
06-14
`html2canvas` 是一个开源的JavaScript库，它的主要作用是将HTML页面渲染为Canvas对象，进而可以将其转换为图片。这个过程通常被称为“屏幕截图”或“DOM截图”。通过这个库，开发者可以在用户的浏览器上直接生成...
html2canvas将HTML内容写入Canvas生成图片 uniapp
12-16
HTML2canvas是一个JavaScript库，它的主要功能是在浏览器环境中将HTML内容转换为Canvas图像，从而能够进一步将这些图像保存为图片格式，如JPEG、PNG等。这个工具在Web开发中非常实用，尤其对于需要在客户端生成屏幕...
原生js基于canvas实现一个简单的前端截图工具代码实例
10-16
本文介绍了一个使用原生JavaScript和HTML5 canvas元素实现的简单前端截图工具的代码实例。这个工具能够让用户在浏览器端截取网页的一部分区域，并以图像形式显示出来。以下是该工具实现的关键技术点： 1. HTML结构...
web端屏幕截屏，生成自定义海报！
分享互联网的有趣知识~
02-28 986
在一些社群网站，经常会碰到问题、活动、商品的信息分享，这种分享通常是以海报的形式发送给好友或保存到本地。在这种场景下，海报肯定是动态变化的，所以我们要动态的渲染内容并生成图片，海报其实就是图片。
解决html2canvas生成图片慢的问题
博客简介
05-09 944
【代码】解决html2canvas生成图片慢的问题。
html2canvas网页元素转图片，并提升渲染速度
LL19880915的博客
12-04 1679
如果页面复杂，html2canvas渲染过慢是因为遍历了所有节点，导致渲染过程变慢,所以我们需要挑出我们需要的dom节点来进行渲染。
一篇文章详解HTML Canvas在高性能渲染中的优势与性能！
需要界面开发、IDE工具研发中文教程资料的小伙伴，记得私信我~
01-08 192
本文章将为大家介绍在高性能渲染中，HTML Canvas有哪些优势与性能。
web前端编辑器内容-使用html2canvas获取截图，并处理一些问题
m0_47531829的博客
12-24 1484
所以虽然我们中间的元素 css 尺寸是 375px，但是因为 Apple 是视网膜屏幕，所以使用了两倍于 css 尺寸的设备像素来渲染它，这就是最后图片尺寸为 750 px 的原因。这是因为我们页面上面的元素都是使用的是阿里云的oss，所以图片的地址会存在跨域的情况，htmlCanvas对于任何跨域的资源都不会做处理，所以就不会显示截图出现的背景图片。第二个问题是html2canvas获取到的截图在某些机型上面得到的宽度是750px，但是我们设置的宽度是375。第三个问题是有的区域出现了灰色黑色的区域。
【html2canvas】html2canvas生成慢和模糊的问题
tuzi007a的博客
04-25 2557
等加载完dom再生成图片，所以慢，有些用不到的dom，可以通过。来忽略掉，在react中，写作。这样能让图片清晰不少。
html2Canvas生成图片展示,下载图片或下载为PDF格式文件
xia_tian666的博客
03-02 3403
介绍 html2Canvas生成图片展示,下载图片或下载为PDF格式文件。 html2Canvas使用方法 npm i html2canvas import html2canvas from "html2canvas"; 代码段 str:pdf标题； eles:需要下载的标签 const title = str; const ele = document.querySelector(eles); html2Canvas(ele, { al
html2canvas的使用与清晰度优化
z17864151193的博客
05-30 5102
这是html页面代码： <view id="Top4Img" class="posterImage" ref="Top0Img"> <image class="bgImg" src="../../static/invite/images/invite4.jpg" /> <view class="title">今日签</view> <view class="num">{{userInfo
html2canvas前端截图技术详解与问题解决
首先，引入html2canvas库到Vue项目中非常简单。只需要通过npm安装： ```bash npm install html2canvas ``` 然后在你的组件中引入并使用： ```javascript import html2canvas from 'html2canvas'; // 生成截图 ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值