JS将div内容保存为图片

最新推荐文章于 2024-06-25 16:59:38 发布

qq_41537416

最新推荐文章于 2024-06-25 16:59:38 发布

阅读量2.1k

点赞数

分类专栏：笔记文章标签： javascript

本文链接：https://blog.csdn.net/qq_41537416/article/details/124323940

版权

笔记专栏收录该内容

15 篇文章 0 订阅

订阅专栏

JS将div内容保存为图片

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/jquery-2.2.0.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="./js/QRCode.js" type="text/javascript" charset="utf-8"></script>
		<script src="./js/html2canvas.js" type="text/javascript" charset="utf-8"></script>
		<style type="text/css">
			#imgDiv {
				width: 520px;
				height: 740px;
				position: relative;
			}

			#bgimg {
				position: absolute;
				left: 0;
				top: 0;
				width: 520px;
				height: 740px;
				z-index: 777;
			}

			#test {
				position: absolute;
				left: 138px;
				top: 290px;
				z-index: 999;
			}
		</style>
	</head>
	<body>
		<div class="content" id="imgDiv">

			<div id="test">

			</div>
			<!-- <img src="123.png" id="bgimg"> -->
		</div>
		<button id="btn" style="margin-top: 100px;height: 50px;">保存为图片</button>
		<script type="text/javascript">
			//生成二维码
			var codeFigure = new AraleQRCode({
				"render": "or", // 生成的类型 'svg' or 'table'
				"text": "森森爱吃瓜",
				"size": 240, // 生成二维码大小
				//"background": "#ffffff", //  背景色
				//"foreground": "red", // 前景色、
				//"pdground": "#000", //三个角颜色
				//"imageSize": 120,
				//"image": "https://img0.baidu.com/it/u=2229864841,4232235061&fm=26&fmt=auto",
			});
			var share_tools = document.querySelector('#test');
			share_tools.appendChild(codeFigure);

			// div 转成 img 图片
			$(document).ready(function() {
				// canvas生成图片
				$("#btn").on("click", function() {
					var getPixelRatio = function(context) { // 获取设备的PixelRatio
						var backingStore = context.backingStorePixelRatio ||
							context.webkitBackingStorePixelRatio ||
							context.mozBackingStorePixelRatio ||
							context.msBackingStorePixelRatio ||
							context.oBackingStorePixelRatio ||
							context.backingStorePixelRatio || 0.5;
						return (window.devicePixelRatio || 0.5) / backingStore;
					};
					//生成的图片名称
					var imgName = "cs.jpg";// 输出图片名称
					var shareContent = document.getElementById("imgDiv");
					var width = shareContent.offsetWidth;
					var height = shareContent.offsetHeight;
					var canvas = document.createElement("canvas");
					var context = canvas.getContext('2d');
					var scale = getPixelRatio(context); //将canvas的容器扩大PixelRatio倍，再将画布缩放，将图像放大PixelRatio倍。
					canvas.width = width * scale;
					canvas.height = height * scale;
					canvas.style.width = width + 'px';
					canvas.style.height = height + 'px';
					context.scale(scale, scale);

					var opts = {
						scale: 1,
						canvas: canvas,
						width: width,
						height: height,
						dpi: window.devicePixelRatio
					};
					html2canvas(shareContent, opts).then(function(canvas) {
						context.imageSmoothingEnabled = false;
						context.webkitImageSmoothingEnabled = false;
						context.msImageSmoothingEnabled = false;
						context.imageSmoothingEnabled = false;
						var dataUrl = canvas.toDataURL('image/jpeg', 1.0);
						dataURIToBlob(imgName, dataUrl, callback);
					});
				});
			})
			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();
			};
		</script>
	</body>
</html>