HTML2CANVAS 合成图片

最新推荐文章于 2024-08-22 11:32:42 发布

mkmin

最新推荐文章于 2024-08-22 11:32:42 发布

阅读量4.1k

点赞数 3

分类专栏：插件文章标签： html5 前端 javascript canvas html2canvas

本文链接：https://blog.csdn.net/hushilin001/article/details/78706576

版权

插件专栏收录该内容

13 篇文章 1 订阅

订阅专栏

注：之前也写过一篇html2canvas，但是感觉大家不会意思到这个有什么用，所以就举个例子

一个比较有趣的玩意，玩ps的同学都玩过图片合成，当然对图片的操作不只是ps的特权，使用html也是可以合成的，而且，这个也是我们经常看到的一个技术点，

（比如将你的头像合成到mj的旁边）

插件：html2canvas，jquery

html2canvas：一个神奇的插件，好吧。其实就是将div转化为canvas，然后在用canvas将其转化为图片。。。。

代码如下：

<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<div class="div1" style="width:150px;height: 20px;;">也许这是优美的文字</div>
	<div class="div2" style="background-repeat:no-repeat;width:200px;height:200px;background-size:100%;background-image: url(img/background.png);"><img class="img3" style="width:150px;margin-left:25px;height:20px;margin-top:50px;" /></div>
	<div class="div3" style="width: 200;height: 200px;;"></div>
	<button class="getpic1">获取图片1</button>
	<button class="getpic2">获取图片2</button>
	<script type="text/javascript" src="js/jquery.js"></script>
	<script type="text/javascript" src="js/html2canvas.js"></script>
	<script>
		//生成第一张视频
		$(".getpic1").bind("click", function() {
			getpic1()
		});
		//将第一张图片放置在div上
		$(".getpic2").bind("click", function() {
			getpic2()
		});

		function getpic1() {
			var str = $('.div1');
			//console.log(str);  
			html2canvas([str.get(0)], {
				onrendered: function(canvas) {
					var image = canvas.toDataURL("image/png");
					$('.img3').attr("src", image);
				}
			});
		}

		function getpic2() {
			var str = $('.div2');
			//console.log(str);  
			html2canvas([str.get(0)], {
				onrendered: function(canvas) {
					var image = canvas.toDataURL("image/png");
					var pHtml = "<img src=" + image + " />";
					$('.div3').html(pHtml);
				}
			});
		}
	</script>

	<body>
	</body>

</html>

不多说，都是简单的代码。接着：

上流程图：