介绍 & lt; div 类=皅r_code"比;
& lt;才能img src=https://www.yisu.com/zixun/" id=" imgcode "/>
<帆布ref=盎肌币?
这篇文章主要介绍了基于原生javaScript生成带图片二维码的方法,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获、下面让小编带着大家一起了解一下。
使用链接生成二维码主要是使用qr。js或者其他,把链接转化为二维码的形式,在使用画布时需要设置画布的尺寸,生成的颜色。
js
函数createQr(){//生成带图片二维码
const qrcode=qr (“http://baidu.com”)//转化链接
const帆布refs.canvas美元=?
const ctx=canvas.getContext (2 d)
常量大?128/qrcode。moduleCount//128设置的二维码尺寸
const规模=window.devicePixelRatio/getPixelRatio (ctx)
画布。身高=画布。宽度=128 e *规模
ctx。量表(量表,量表)
qrcode.modules。forEach((行,rdx)=> {
行。forEach((细胞,cdx)=> {
ctx。fillStyle=细胞?“# 000”:“# fff”//设置二维码颜色和背景颜色
var w=(数学。装天花板((cdx + 1) *大小)——数学。地板(cdx *大小))
ctx.fillRect(数学。圆(cdx *大小),数学。圆(rdx *大小),w w)
})
})
var图像=document.createElement (img)
var imgcode=. getelementbyid (“imgcode”)
的形象。src=" https://cache.yisu.com/upload/information/20200622/114/10385.png "//二维码中间图标
的形象。onload=()=> {
var dwidth=128 * 0.2//设置图片大小
var dx=(128 - dwidth)/2
var dheight=形象。高度/形象。宽度* dwidth
var dy=(。大小- dheight)/2
的形象。宽度=dwidth
的形象。身高=dheight
ctx。drawImage(图片,dx, dy, dwidth dheight)
imgcode。src=canvas.toDataURL ()
}
}，
getPixelRatio (ctx) {
ctx返回。webkitBackingStorePixelRatio | | ctx。backingStorePixelRatio | | 1
}
感谢你能够认真阅读完这篇文章,希望小编分享的“基于原生javaScript生成带图片二维码的方法”这篇文章对大家有帮助,同时也希望大家多多支持,关注行业资讯频道,更多相关知识等着你来学习!
