前端如何优雅的制做带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
})
复制代码

总结

以上就完成了前端去生成二维码，且封装后，在页面中写入的代码不多，就能够实现不一样的二维码带不一样的信息，且能够调起长按下载图片。