前端如何優雅的製做帶LOGO的二維碼

說在前面的話...

最近項目有個功能產品列表，能夠將不一樣產品生成不一樣的二維碼，掃碼能夠進入對應的產品詳情頁，同時二維碼須要帶公司logo,須要能夠長按調起微信的下載圖片的功能，其實也就是說，最後生成的二維碼是一個圖片

首先介紹一個比較出名的生成二維碼的插件QRcode

1. 這個插件是基於jq封裝的因此在使用時須要先引入jq
2. 用法也比較簡單 直接上代碼

<div id="qrcode" class="qrcode clip"></div>
<canvas id="myCanvas" width="200" height="200" class="qrcode clip"></canvas>
<img id="canvasImg" alt="" width="200" height="200" class="qrcode">
let src = "/static/imgs/settle.png"; //想顯示的二維碼中間的圖片
$("#qrcode").qrcode({
 	render: "canvas", //設置渲染方式，有table和canvas，使用canvas方式渲染性能相對來講比較好
	text: ``, //掃描二維碼後顯示的內容,能夠直接填一個網址，掃描二維碼後自動跳向該連接
	width: "200", //二維碼的寬度
	height: "200", //二維碼的高度
	background: "#ffffff", //二維碼的後景色
	foreground: "#000000", //二維碼的前景色
	src: src //二維碼中間的圖片
});
複製代碼

這樣操做你們會發現已經顯示了帶logo的二維碼，細心的同窗會發現，當咱們在手機中打開頁面時，並不能調起長按保存二維碼，緣由是咱們拿插件生成是canvas並非img,因此後面咱們要進入真正的主題，利用canvas生成圖片

利用canvas生成圖片

• 首先整理一下思路，從上面的方法中咱們已經獲得了canvas ,那canvas可不能夠直接轉成圖片呢
• 引入canvas.toDataURL(),這個方法是將canvas轉化成base64,base64能夠做爲img的src,就能夠成功的將canvas轉化成圖片，參數咱們能夠定義是想轉化爲什麼種形式的圖片，我這裏用的toDataURL("image/png")

  convertCanvasToImage() {
      var canvas = $("#qrcode canvas")[0].toDataURL("image/png")
      return canvas
   }
  複製代碼

• 可是當咱們轉化完成以後卻發現，轉化出來的base64展現出來只是一張二維碼，並無logo,我分析應該插件沒有真正的將logo合成上去，咱們須要將logo和base64合成一張圖片，因此須要利用canvas合成圖片

利用canvas合成圖片

• 那麼首先咱們整理一下思路，其實咱們要作的就是利用canvas的drawImage畫圖片功能前後將base64.和logo畫上去，最後再一塊兒轉成base64
• 這裏有一個問題是畫圖時咱們是須要用到img.onload方法，而這個方法是異步，且須要本地服務支持，有些同窗可能會在本地靜態頁面寫demo ，卻展現不出最後合成的base64，就是由於無服務的緣由。因此須要利用node,或者放在相似vue ng 這類項目中 看效果

export function creatEwm(base64, canvas,callback) {
 var ctx = canvas.getContext("2d");
 var img = document.createElement('img');
 img.src = '/static/imgs/icon-phone.png'
 img.onload = function () {
   var imgUpload = new Image();
   imgUpload.src = base64();
   imgUpload.onload = function () {
     // 繪製
     ctx.drawImage(imgUpload, 0, 0, 200, 200);
     ctx.drawImage(img, 78, 80, 40, 40);
     callback(canvas.toDataURL("image/png"))
   };
 }
}
複製代碼

• 上面我封裝了一下生成最後base64的方法
• 參數一base64是咱們第一次拿qrcode生成二維碼的base64也就是我上面寫的convertCanvasToImage方法的返回值
• 參數二是獲取到的須要繪製的canvas的節點，這裏與qrcode 的節點不一樣 需重新定義，也就是我在最開始定義id爲myCanvas的canvas標籤
• 參數三是傳回調，由於上面講到，img.onload是異步加載，咱們是拿不到最後的base64，能夠經過回調的方式獲取到異步數據，固然也能夠用promise等方式
• 方法中，引入了須要的logo 但這次並無任何地方承載這個圖片。因此咱們須要新建一個空img標籤去承載，後面才能夠用drawImage方法，固然用new Image()方法也是能夠
• 同理傳入的base64也須要這麼作。
• 爲何使用img.onload？緣由是咱們需等待圖片加載完成再去進行操做，且圖片加載的方法最好嵌套寫，等圖片1加載完加載圖片2
• 最後傳入回調將獲取的最後的base 以src的方式渲染到html中

creatEwm(this.convertCanvasToImage, document.getElementById('myCanvas'), function (dataUrl) {
   document.getElementById("canvasImg").src = dataUrl
})
複製代碼

總結

以上就完成了前端去生成二維碼，且封裝後，在頁面中寫入的代碼不多，就能夠實現不一樣的二維碼帶不一樣的信息，且能夠調起長按下載圖片。