js canvas實現(xiàn)5張圖片合成一張圖片

更新時間：2019年07月15日 14:59:45 作者：ChorKiu

這篇文章主要為大家詳細介紹了js canvas實現(xiàn)5張圖片合成一張圖片，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文具體要實現(xiàn)的效果類似下面這張圖片，主題流程大概是，頁面上有類似這樣布局的結(jié)構(gòu)，點擊中間那個紫色的按鈕就會生成一張這樣的圖片，并且能夠讓用戶下載圖片的

1、首先我們布局頁面的時候用的都是圖片來布局成這個樣子[CSS自己腦補]，class為pho-bg這一段是頁面開始顯示的結(jié)構(gòu)，幾張圖片定位，按鈕在中間的樣子。class為photo的就是用來到時候放置生成的圖片。canvas就是畫布。至于下面的兩張圖片其實就是按鈕的圖片和背景圖，到時候一并加入畫布里面【不過在頁面的時候不顯示】

 <div class="pho-bg">
 <img src="ossweb-img/man-1.png" class="man man-1" id="man-1" alt="">
 <img src="ossweb-img/man-2.png" class="man man-2" id="man-2" alt="">
 <img src="ossweb-img/man-3.png" class="man man-3" id="man-3" alt="">
 <img src="ossweb-img/man-4.png" class="man man-4" id="man-4" alt="">
 <a href="javascript:;" class="btn" title=""></a>
 <img src="ossweb-img/sen.png" class="sen1" id="sen1" alt="">
 <img id="show-pic" alt="">
 </div>
 <div class="photo"></div>
 <canvas id="myCanvas" width="750" height="1180"></canvas>
 <img src="ossweb-img/bg1.jpg" id="bg1" alt="">
 <img src="ossweb-img/btn.png" id="btn1" alt="">

2、重要的是js部分，這里面有幾個部分

在點擊按鈕時隱藏掉本來的頁面，顯示畫布生成的圖片
canvas.width，canvas.height是設置你生成的圖片的大小。舉個例子：如果我在canvas的html標簽里面設置的width=750，height=1180，但是在js里面設置了canvas.width=500，canvas.height=500，那么生成的圖片的大小就會是500*500.
使用createPattern來制作圖片的背景圖
使用drawImage()來制作組成圖片的小元素也就是紅、黃、藍、綠、紫那幾張圖片
最后用toDataURL()將畫布的內(nèi)容轉(zhuǎn)為圖片并且渲染到頁面上

$('.btn').click(function() {
 $('.pho-bg').hide();
 // $('#myCanvas').show();
 var man1 = document.getElementById("man-1"),
 man2 = document.getElementById("man-2"),
 man3 = document.getElementById("man-3"),
 man4 = document.getElementById("man-4"),
 sen1 = document.getElementById("sen1"),
 btn1 = document.getElementById("btn1"),
 canvasBg = document.getElementById("bg1");
 
 
 var canvas = document.getElementById("myCanvas");
 ctx = canvas.getContext("2d");
 canvas.width = 750;
 canvas.height = 1180;
 // 制作背景圖
 var patBg = ctx.createPattern(canvasBg, "repeat");
 ctx.rect(0, 0, 750, 1180);
 ctx.fillStyle = patBg;
 ctx.fill();
 // 將man1,man2,man3,man4,sen1,btn加入畫布
 ctx.drawImage(man1, 0, 0, 341, 474);
 ctx.drawImage(man2, 410, 0, 341, 474);
 ctx.drawImage(man3, 0, 474, 341, 474);
 ctx.drawImage(man4, 410, 474, 341, 474);
 
 ctx.drawImage(sen1, 40, 950, 669, 109);
 ctx.drawImage(btn1, 150, 350, 449, 288);
 var newImg = new Image();
 newImg.src = canvas.toDataURL("image/png");
 
 $('.photo').append(newImg);
 
 });

最后的結(jié)果生成的圖片就是這樣子的