HTML2CANVAS 合成图片
生活随笔
收集整理的這篇文章主要介紹了
HTML2CANVAS 合成图片
小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
注：之前也寫(xiě)過(guò)一篇html2canvas，但是感覺(jué)大家不會(huì)意思到這個(gè)有什么用，所以就舉個(gè)例子一個(gè)比較有趣的玩意，玩ps的同學(xué)都玩過(guò)圖片合成，當(dāng)然對(duì)圖片的操作不只是ps的特權(quán)，使用html也是可以合成的，而且，這個(gè)也是我們經(jīng)常看到的一個(gè)技術(shù)點(diǎn)，
代碼如下： <html><head><meta charset="UTF-8"><title></title></head><div class="div1" style="width:150px;height: 20px;;">也許這是優(yōu)美的文字</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>不多說(shuō)，都是簡(jiǎn)單的代碼。接著： 上流程圖：
1.此時(shí)，圖片是什么都沒(méi)有的，現(xiàn)在我們點(diǎn)擊第一張按鈕
2.看到。現(xiàn)在文字出現(xiàn)在了圖片上，接著，我們點(diǎn)擊第三個(gè)按鈕
3.現(xiàn)在，新圖片生成，就可以保存在本地了 js文件已經(jīng)上傳，如果找不到的，可以百度。。。
（比如將你的頭像合成到mj的旁邊）
插件：html2canvas，jquery
html2canvas：一個(gè)神奇的插件，好吧。其實(shí)就是將div轉(zhuǎn)化為canvas，然后在用canvas將其轉(zhuǎn)化為圖片。。。。代碼如下： <html><head><meta charset="UTF-8"><title></title></head><div class="div1" style="width:150px;height: 20px;;">也許這是優(yōu)美的文字</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>不多說(shuō)，都是簡(jiǎn)單的代碼。接著： 上流程圖：
1.此時(shí)，圖片是什么都沒(méi)有的，現(xiàn)在我們點(diǎn)擊第一張按鈕
2.看到。現(xiàn)在文字出現(xiàn)在了圖片上，接著，我們點(diǎn)擊第三個(gè)按鈕
3.現(xiàn)在，新圖片生成，就可以保存在本地了 js文件已經(jīng)上傳，如果找不到的，可以百度。。。
總結(jié)
以上是生活随笔為你收集整理的HTML2CANVAS 合成图片的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： PWM调光简单易懂
- 下一篇： html产生圆点列表符号的列表,HTML