如何基于原生javaScript生成带图片的二维码
2019-11-22 12:12
1046 查看
这篇文章主要介绍了如何基于原生javaScript生成带图片的二维码,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
使用链接生成二维码主要是使用qr.js或者其他,把链接转化为二维码的形式,在使用canvas时需要设置画布的尺寸,生成的颜色。
<div class="qr_code"> <img src="" id="imgcode" /> <canvas ref="canvas" hidden></canvas> <div> js function createQr () { // 生成带图片二维码 const qrcode = qr('http://baidu.com') // 转化链接 const canvas = this.$refs.canvas const ctx = canvas.getContext('2d') const size = 128 / qrcode.moduleCount //128设置的二维码尺寸 const scale = window.devicePixelRatio / getPixelRatio(ctx) canvas.height = canvas.width = 128e * scale ctx.scale(scale, scale) qrcode.modules.forEach((row, rdx) => { row.forEach((cell, cdx) => { ctx.fillStyle = cell ? '#000' : '#fff' // 设置二维码颜色和背景颜色 var w = (Math.ceil((cdx + 1) * size) - Math.floor(cdx * size)) ctx.fillRect(Math.round(cdx * size), Math.round(rdx * size), w, w) }) }) var image = document.createElement('img') var imgcode = document.getElementById('imgcode') image.src = 'http://baidu/logo.png' //二维码中间图标 image.onload = () => { var dwidth = 128 * 0.2 // 设置图片大小 var dx = (128 - dwidth) / 2 var dheight = image.height / image.width * dwidth var dy = (this.size - dheight) / 2 image.width = dwidth image.height = dheight ctx.drawImage(image, dx, dy, dwidth, dheight) imgcode.src = canvas.toDataURL() } }, getPixelRatio (ctx) { return ctx.webkitBackingStorePixelRatio || ctx.backingStorePixelRatio || 1 }
以上就是本文的全部内容,希望对大家的学习有所帮助
您可能感兴趣的文章:
相关文章推荐
- JavaScript生成二维码图片小结
- 动态生成二维码图片后通过js(JavaScript)或jq实现网页图片转base64格式下载
- java如何生成二维码图片
- 如何利用C#来生成带图片的二维码
- java如何生成二维码图片
- 基于JavaScript实现生成名片、链接等二维码
- javascript原生移动云编程11 - 如何调用手机图库中图片
- 基于原生javascript的图片轮播domo
- JavaScript动态生成二维码图片
- 基于google zxing二维码的生成,直接返回页面图片
- 【JavaScript】7.如何让鼠标移上去显示图片或者微信二维码
- 基于JavaScript实现生成名片、链接等二维码
- C#基于QRCode实现动态生成自定义二维码图片功能示例
- 基于Google的Zxing包生成带文字的二维码图片
- JavaScript动态生成二维码图片
- javascript动态生成网址二维码图片
- android TV端如何读取微信网页版二维码显示生成一张图片
- 基于ZXing Android实现生成二维码图片和相机扫描二维码图片即时解码的功能
- 基于原生javascript的图片轮播domo
- 一个基于原生JavaScript开发的、轻量的验证码生成插件