快捷導(dǎo)航

基于canvas的二維碼邀請函生成插件

更新時(shí)間：2017年02月14日 16:46:31 作者：ppk2

本文主要介紹了基于canvas的二維碼邀請函生成插件。具有很好的參考價(jià)值，下面跟著小編一起來看下吧

這是17年的第一篇博文，話說這天又是產(chǎn)品同學(xué)跑過來問我說：hi，lenny，你看現(xiàn)在市面上流行各種裝逼H5，隨便輸入點(diǎn)名字啥的就給我生成房產(chǎn)證了，這種還可以分享出去，傳播率可高了，或者你再看這里，一鍵生成邀請函，牛吧，要不你也幫我做一個(gè)這個(gè)功能，我去玩點(diǎn)傳播手段。

我看見效果后第一反映就是，肯定canvas進(jìn)行的圖片拼接，現(xiàn)在市面上流行的效果具體是如何實(shí)現(xiàn)的我沒有去看源碼，思路很清晰，于是晚飯后沒有下班，開始我的插件制作之旅了。

首先，我們需要思考，既然是圖片處理，那么就必然存在圖片下載，我們知道圖片的onload是異步回調(diào)，所有的資源必須在下載完成后才可以進(jìn)行接下來的邏輯，前置資源下載的邏輯就很關(guān)鍵，我們不僅需要在onload事件回調(diào)后去處理我們后續(xù)的流程，同時(shí)需要在所有必須資源加載完成后才執(zhí)行，所以我們需要構(gòu)建一個(gè)資源數(shù)組大致如下：

[{
 {
  name: 'bg',
  src: '../img/bg.jpg'
 }, {
  name: 'z',
  src: '../img/z.png'
 }]

為了獲得最終的complete事件，我們需要利用一個(gè)全局變量監(jiān)聽onload或者onerror次數(shù)：

var i = 1;
  arr.forEach(function(obj, index, array) {
  function onLoad() {
   _self[obj.name] = img;
   if (i < array.length) {
   ++i;
   } else {
   console.log('complete');
   };
  }
  var img = new Image();
  img.onload = onLoad;
  img.onerror = onLoad;
  img.src = obj.src;

好了，資源加載完成事件我們得到了，可以繼續(xù)下面的邏輯，既然是基于canvas，當(dāng)然需要?jiǎng)?chuàng)建并初始化我們的canvas，我根據(jù)自己的需求，這個(gè)功能在我所使用的項(xiàng)目中不論初始化多少次，只會(huì)存在一個(gè)，所以我做了如下的控制：

init: function() {
  var LCanvasImg_canvas = document.querySelector('#LCanvasImg_canvas');
  if (LCanvasImg_canvas) {
  LCanvasImg_canvas.width = this.params.cw;
  LCanvasImg_canvas.height = this.params.ch;
  LCanvasImg_canvas.style.display = this.params.display;
  this.canvas = LCanvasImg_canvas;
  } else {
  var canvas = document.createElement('canvas');
  canvas.id = 'LCanvasImg_canvas';
  canvas.width = this.params.cw;
  canvas.height = this.params.ch;
  canvas.style.display = this.params.display;
  document.body.appendChild(canvas);
  this.canvas = canvas;
  }
  this.clear();
 },

canvas創(chuàng)建好了，接下來我們需要實(shí)現(xiàn)圖片渲染的能力，canvas的圖片渲染使用的是drawImage方法，根據(jù)官方文檔，該方法有3種傳參方式：

JavaScript 語法 1

在畫布上定位圖像：

context.drawImage(img,x,y);

JavaScript 語法 2

在畫布上定位圖像，并規(guī)定圖像的寬度和高度：

context.drawImage(img,x,y,width,height);

JavaScript 語法 3

剪切圖像，并在畫布上定位被剪切的部分：

context.drawImage(img,sx,sy,swidth,sheight,x,y,width,height);

于是，我們也充分的判斷好我們調(diào)用的drawImage參數(shù)：

addImg: function(obj, callback) {
  var _self = this;
  var canvas = _self.canvas;
  var ctx = canvas.getContext("2d");
  if (obj.hasOwnProperty('sx') && obj.hasOwnProperty('sy') && obj.hasOwnProperty('sw') && obj.hasOwnProperty('sh') && obj.hasOwnProperty('x') && obj.hasOwnProperty('y') && obj.hasOwnProperty('width') && obj.hasOwnProperty('height')) {
  ctx.drawImage(_self[obj.name], obj.sx, obj.sy, obj.sw, obj.sh, obj.x, obj.y, obj.width, obj.height);
  } else if (obj.hasOwnProperty('x') && obj.hasOwnProperty('y') && obj.hasOwnProperty('width') && obj.hasOwnProperty('height')) {
  ctx.drawImage(_self[obj.name], obj.x, obj.y, obj.width, obj.height);
  } else if (obj.hasOwnProperty('x') && obj.hasOwnProperty('y')) {
  ctx.drawImage(_self[obj.name], obj.x, obj.y);
  } else {
  ctx.drawImage(_self[obj.name], 0, 0);
  }
  _self.showImg();
 },

接下來我們需要開發(fā)文字生成的能力，這個(gè)比較簡單，如果對canvas相關(guān)api熟悉點(diǎn)的，這部分沒有難度：

addFont: function(obj) {
  var _self = this;
  var canvas = _self.canvas;
  var ctx = canvas.getContext("2d");
  ctx.font = obj.fontsize + "px " + obj.fontfamily; //文字的字體大小和字體系列
  var ftop = obj.ftop; //文字top
  var fleft = obj.fleft; //文字left
  ctx.textBaseline = "top"; //設(shè)置繪制文本時(shí)的文本基線。
  ctx.fillText(obj.txt, fleft, ftop);
  ctx.lineWidth = 1;
  ctx.fillStyle = "#000";
  ctx.strokeStyle = "rgba(255,255,255,0.4)";
  ctx.strokeText(obj.txt, fleft, ftop);
 },

最后一步是二維碼的生成，這個(gè)有點(diǎn)坑，自己開發(fā)肯定來不及了，我選用的是一個(gè)開源插件：qrcode，根據(jù)這個(gè)插件，我們可以在一個(gè)img中動(dòng)態(tài)生成二維碼的base64字串，而有了這個(gè)字串，我們也很方便的將內(nèi)容輸出到我們的canvas中，為了保證體驗(yàn)，這個(gè)插件的最外層div直接display：none，避免它干擾到我們的實(shí)際項(xiàng)目。

<div id="qrcode" style="display: none;"></div>

/**
 * 
 * 初始化二維碼生成插件
 * 
 */
 var qrdata = '';
 var myqr = document.querySelector('#myqr');
 var qrcode = document.querySelector('#qrcode');
 var qr = new QRCode(qrcode, {
 width: 300,
 height: 300,
 colorDark: "#000000",
 colorLight: "#ffffff",
 correctLevel: QRCode.CorrectLevel.L
 });

由于這個(gè)img是動(dòng)態(tài)變化的，我們獲取base64字串的時(shí)候一定要在該img的onload事件的回調(diào)內(nèi)去獲取，這點(diǎn)非常重要：

function buildQr () {
 var img = qrcode.querySelector('img');
 img.onload = function() {
 qrdata = img.src;
 main();
 };
 qr.makeCode(myqr.value);
 }

ok，準(zhǔn)備工作都完成了，接下來我們需要開始初始化我們的插件了，我預(yù)先埋下了很多可配置的參數(shù)：

var canvasImg = null;
 function main() {
 //初始化
 canvasImg = new LCanvasImg({
  cw: 768,//canvas width
  ch: 1163,//canvas height
  iw: '100%',//output img width
  ih: 'auto',//output img height
  display:'none'//canvas display
 });
 //資源加載
 canvasImg.load([{
  name: 'qr',
  src: qrdata
 }, {
  name: 'bg',
  src: '../img/bg.jpg'
 }, {
  name: 'z',
  src: '../img/z.png'
 }], build);
 };

看見上面的build變量了嗎？我們將圖片生成邏輯全部寫在這個(gè)build方法中，在load資源complete后，會(huì)執(zhí)行build;

function build() {
 var farr = [{
  txt: document.querySelector('#mytxt1').value,
  fontsize: 26,
  fontfamily: 'fzjt',
  ftop: 140,
  fleft: 194
 }, {
  txt: '胡鑫',
  fontsize: 26,
  fontfamily: 'fzjt',
  ftop: 220,
  fleft: 394
 }, {
  txt: '鄧逸昕',
  fontsize: 26,
  fontfamily: 'fzjt',
  ftop: 220,
  fleft: 294
 }, {
  txt: document.querySelector('#mytxt1').value,
  fontsize: 26,
  fontfamily: 'fzjt',
  ftop: 220,
  fleft: 194
 }];
 canvasImg.addImg({
  name: 'bg',
  x: 0,
  y: 0,
  width: 768,
  height: 1163
 });
 farr.forEach(function(obj) {
  canvasImg.addFont(obj);
 });
 canvasImg.addImg({
  name: 'z',
  x: 0,
  y: 0,
  width: 100,
  height: 100
 });
 canvasImg.addImg({
  name: 'z',
  sx: 0,
  sy: 0,
  sw: 150,
  sh: 150,
  x: 100,
  y: 100,
  width: 100,
  height: 100
 });
 canvasImg.addImg({
  name: 'qr',
  x: 400,
  y: 800,
  width: 200,
  height: 200
 });
 };
 window.onload = buildQr;

最后一句話非常重要,為什么這里我需要用window.onload事件，如果你使用的是webfont，當(dāng)webfont下載成功后，其實(shí)還有一小段時(shí)間需要將font字體載入進(jìn)瀏覽器中，只有在window.onload事件時(shí)，webfont字體文件才能生效。

最后奉上效果截圖：