文章截图(html2Canvas)保存分享转发

最新推荐文章于 2025-10-30 13:49:29 发布

原创最新推荐文章于 2025-10-30 13:49:29 发布 · 388 阅读

CC 4.0 BY-SA版权

文章标签：

<!DOCTYPE html>
<html>
	<head>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<meta charset="utf-8">
		<title>文章分享</title>
		<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
		**/* 官网下载html2canvas.min.js(转成图片)   canvas2Image.js(保存图片)  两个js */**
		<script src="js/html2canvas.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/canvas2Image.js" type="text/javascript" charset="utf-8"></script>
		<style type="text/css">
			.layui-layer-content img{width: 300px;height: 500px;}
			.layui-layer-content{background-image: url('https://img04.sogoucdn.com/app/a/100520024/ec675e77fb476e2987d611f935a1f90f');background-size: 100% 100%;}
		</style>
	</head>
	<body>
		<div style="width: 300px;height: 500px;" class="layui-layer-content"></div>
		<h2 class="share"> <a href="javascript:void(0);"> 点击转成canvas </a></h2>
		    <button id="save">保存</button>
	</body>
	<script type="text/javascript">
		var test = $(".layui-layer-content").get(0); //将jQuery对象转换为dom对象
	    // 点击转成canvas
	    $('.share').click(function(e) {
			// $(".layui-layer-content").css({"background-image":"url('https://img04.sogoucdn.com/app/a/100520024/ec675e77fb476e2987d611f935a1f90f')","background-size":"100% 100%"});
			var opts = { //初始化对象
			    useCORS: true **//开启html2canvas的useCORS配置，跨域配置，以解决图片跨域的问题 服务器也得配置允许跨域请求 本地图片不存在跨域**
			};

	        // 调用html2canvas插件
			setTimeout(function(){
				html2canvas(test,opts).then(function(canvas) {
				    // canvas宽度
				    var canvasWidth = canvas.width;
				    // canvas高度
				    var canvasHeight = canvas.height;
				    // 渲染canvas
				    // $('.share').after(canvas);
				    // 调用转成图片方法
					setTimeout(function(){
						var img = convertToImage(canvas, canvasWidth, canvasHeight);
						
					},500);
					//保存
					// $("#save").click(function(){
					// 	saveAsImage(canvas, canvasWidth, canvasHeight);
					// })
				
				});
			},500)
	        
	    });
		
		function convertToImage (canvas, canvasWidth, canvasHeight) { //转成图片格式
			// 调用Canvas2Image插件
			var img = Canvas2Image.convertToImage(canvas, canvasWidth, canvasHeight);
			// 渲染图片
			$(".layui-layer-content").html(img);
		}
		
		function saveAsImage (canvas, w, h, type, f) { //保存图片
			// 调用Canvas2Image插件
			Canvas2Image.saveAsImage(canvas, w, h);
		}
	</script>
</html>
html2Canvas官网： [http://html2canvas.hertzen.com/]