雕虫小技：div转换成图片并下载之jQuery实现

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

上网的虫不叫网虫

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

阅读量1.7k

点赞数

分类专栏： JS 技术总结文章标签： jquery javascript 前端 canvas

本文链接：https://blog.csdn.net/qq_42961150/article/details/122197985

版权

JS 同时被 2 个专栏收录

28 篇文章 0 订阅

订阅专栏

技术总结

16 篇文章 0 订阅

订阅专栏

概要

div转换成图片并下载，在网站制作中也是经常会遇到的技术。在这里介绍的方法是使用jQuery实现。

前提条件

依赖jQuery.js插件，可到官网进行下载jQuery.com。
依赖bluebird.js插件，推荐获取方式：使用命令npm install bluebird进行下载，下载后在node_modules\bluebird\js\browser文件夹中找到需要的js。
依赖html2canvas.js，推荐获取方式：使用命令npm install --save html2canvas进行下载，下载后在D:\web\node_modules\html2canvas\dist文件夹中找到需要的js。

示例代码

以下是使用jQuery实现div转换成图片并下载功能的示例代码，可以直接复制到html文件中直接运行测试。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.myDiv {
				width: 200px;
				height: 400px;
				background: rgba(0,0,0,.5);
				font-size: 18px;
				color: #fff;
			}
		</style>
	</head>
	<body>
		<button type="button" id="btn">下载图片</button>
		<div class="myDiv" id="imgDiv">
			<p>测试测试</p>
			<p>测试测试</p>
			<p>测试测试</p>
			<p>测试测试</p>
		</div>
		<script type="text/javascript" src="https://libs.baidu.com/jquery/1.8.3/jquery.min.js"></script>
		<script type="text/javascript" src="plugin/bluebird.min.js"></script>
		<script type="text/javascript" src="plugin/html2canvas.min.js"></script>
		<script type="text/javascript">
			$(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 = "image.png";
					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: scale,
						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);
					});
				});
			})
			// edited from https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/toBlob#Polyfill
			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>