JS页面截图

Oct zz拾月

已于 2022-11-24 10:45:32 修改

阅读量481

点赞数

分类专栏：个人记录文章标签： javascript 前端开发语言

于 2022-11-24 10:44:37 首次发布

本文链接：https://blog.csdn.net/qq_33407279/article/details/128013489

版权

个人记录专栏收录该内容

17 篇文章 0 订阅

订阅专栏

1、引入 js 【密码：gf33】
点击下载 html2canvas.min.js

<script src="{url:@static/octzz/js/html2canvas.min.js}"></script>

2、html代码

<body>
	<div>
		<button type="button" class="layui-btn" onclick="createImg();">截图</button>

	</div>
	<div id="imgDiv" style="z-index: -1;">
		<fieldset class="layui-elem-field layui-field-title" 
		style="margin-top: 20px;">
			<legend>表格</legend>
		</fieldset>
		<div class="layui-form">
			<table class="layui-table">
				<colgroup>
					<col width="150">
					<col width="150">
					<col width="200">
					<col>
				</colgroup>
				<thead>
					<tr>
						<th>人物</th>
						<th>民族</th>
						<th>出场时间</th>
						<th>格言</th>
					</tr>
				</thead>
				<tbody>
					<tr>
						<td>贤心</td>
						<td>汉族</td>
						<td>1989-10-14</td>
						<td>人生似修行</td>
					</tr>
				</tbody>
			</table>
		</div>
	</div>
</body>

3、js代码

<script>
	var dataURIToBlob = function (imgName, dataURI, callback) {
		var binStr = atob(dataURI.split(',')[1]),
			len = binStr.length,
			arr = new Uint8Array(len);

		for (var i = 0; i < len; i++) {
			arr[i] = binStr.charCodeAt(i);
		}
		callback(imgName, new Blob([arr]));
	}

	var callback = function (imgName, blob) {
		var triggerDownload = $("<a>").attr("href", URL.createObjectURL(blob)).attr("download", imgName).appendTo("body").on("click", function () {
			if (navigator.msSaveBlob) {
				return navigator.msSaveBlob(blob, imgName);
			}
		});
		triggerDownload[0].click();
		triggerDownload.remove();
	};

	/*使用的话只需看这段代码*/
	function createImg() {
		// 步骤一: 设置生成图片的名字
		var imgName = "20220101.png";
		// 步骤二: 选择需要截取的dom, 可以更具需求修改选择器
		var shareContent = document.getElementById('imgDiv');
		// 克隆一下需要截取的dom（这个操作必须有, 不然的话页面以外看不到的内容会截取不到）
		var copyDom = shareContent.cloneNode(true);
		copyDom.style.width = shareContent.scrollWidth + "px";
		copyDom.style.height = shareContent.scrollHeight + "px";
		document.querySelector("body").appendChild(copyDom);
		// 步骤三: 调用html2canvas 截图
		html2canvas(copyDom).then(function (canvas) {
			const context = canvas.getContext("2d");
			context.imageSmoothingEnabled = false;
			context.webkitImageSmoothingEnabled = false;
			context.msImageSmoothingEnabled = false;
			context.imageSmoothingEnabled = false;
			let imgUrl = canvas.toDataURL("image/png").replace("image/png", "image/octet-stream");
			dataURIToBlob(imgName, imgUrl, callback);
			copyDom.remove();
		});
	}
</script>