HTML2CANVAS 合成图片

article/2025/9/18 12:06:12

注：之前也写过一篇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>

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

上流程图：