这篇文章主要介绍了基于原生javaScript生成带图片二维码的方法，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。
10年积累的成都网站设计、
做网站经验，可以快速应对客户对网站的新想法和需求。提供各种问题对应的解决方案。让选择我们的客户得到更好、更有力的网络服务。我虽然不认识你，你也不认识我。但先
做网站设计后付款的网站建设流程，更有
惠济免费网站建设让你可以放心的选择与我们合作。
使用链接生成二维码主要是使用qr.js或者其他，把链接转化为二维码的形式，在使用canvas时需要设置画布的尺寸，生成的颜色。
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 = '/file/tupian/20230213/404.html' //二维码中间图标
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生成带图片二维码的方法”这篇文章对大家有帮助，同时也希望大家多多支持创新互联，关注创新互联行业资讯频道，更多相关知识等着你来学习!
网页名称：基于原生javaScript生成带图片二维码的方法-创新互联
本文网址：
http://www.cdkjz.cn/article/ecoge.html
