js如何使用canvas實現二維碼和圖片合成的海報

這篇文章給大家分享的是有關js如何使用canvas實現二維碼和圖片合成的海報的內容。小編覺得挺實用的，因此分享給大家做個參考，一起跟隨小編過來看看吧。

思路：在微信中登錄，后臺傳來的是一個鏈接、一個名字、一張圖片。把圖片當做背景，畫滿整個畫布。之后需要把鏈接轉為二維碼，使用jq.qrcode轉化，轉化完成后是一個canvas，把這個canvas再轉成一張圖片，畫到大的畫布上。把名字畫到畫布上。把整張畫布轉為圖片。

一、定義畫布和合成海報的img

<style type="text/css">
#canbox {
 width: 100%;
 height: 100%;
 position: fixed;
 top: 0;
 bottom: 0;
 left: 0;
}
.canimg {
 width: 100%;
 height: 100%;
 position: fixed;
 top: 0;
 bottom: 0;
 left: 0;
}
</style>

<div id="qrcode">
  
</div>
<div id="canbox">
  <canvas id="myCanvas" width="" height=""></canvas>
</div>
<img class="canimg" src=""/>

二、用jquery.qrcode把網址變成二維碼

后臺傳過來的是網址，需要轉為二維碼，二維碼也是canvas，需要把二維碼轉為圖片

$("#qrcode").qrcode({
 width: 72, //寬度 
 height: 72, //高度 
 text: res.data.poster_qrcode, //任意內容 
});

三、把圖片畫到畫布上，需要占滿全屏

//畫海報
var width = document.getElementById("canbox").offsetWidth; //寬度 
var height = document.getElementById("canbox").offsetHeight; // 高度
var c = document.getElementById("myCanvas");
c.width = width
c.height = height
var ctx = c.getContext("2d");
//首先畫上背景圖
var img = new Image();
img.src = this.list.poster;
img.setAttribute("crossOrigin", 'Anonymous')
var x_bot = height - 44 //畫上名字
ctx.font = "19px Georgia";

//畫上二維碼
function convertCanvasToImage(canvas) {
 var image = new Image();
 image.src = canvas.toDataURL("image/png");
 return image;
}
var mycans = $('canvas')[1];//二維碼所在的canvas
var codeimg = convertCanvasToImage(mycans)
var xw = width - 72 - 29
var xh = height - 6 - 72

img.onload = function() { //必須等待圖片加載完成
 ctx.drawImage(img, 0, 0, width, height); //繪制圖像進行拉伸
 ctx.fillText(that.name, 28, x_bot);
 ctx.drawImage(codeimg, xw, xh, 72, 72);
 //繪制完成,轉為圖片
 setTimeout(function() { //在ios上無法在畫完之后取到整個畫布內容，加了個settimeout
 var bigcan = $('canvas')[0];
 let images = new Image();
 images.src = bigcan.toDataURL("image/png");
 alert(bigcan.toDataURL("image/png"))
 images.setAttribute("crossOrigin", 'Anonymous')
 $('.canimg').attr('src', bigcan.toDataURL("image/png"))
 }, 0)
}

JavaScript是什么

JavaScript是一種直譯式的腳本語言，其解釋器被稱為JavaScript引擎，是瀏覽器的一部分，JavaScript是被廣泛用于客戶端的腳本語言，最早是在HTML網頁上使用，用來給HTML網頁增加動態功能。

感謝各位的閱讀！關于“js如何使用canvas實現二維碼和圖片合成的海報”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，讓大家可以學到更多知識，如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！