如何基于原生javaScript生成帶圖片的二維碼
更新時(shí)間：2019年11月21日 10:57:37 作者：木子沐沐
這篇文章主要介紹了如何基于原生javaScript生成帶圖片的二維碼,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
這篇文章主要介紹了如何基于原生javaScript生成帶圖片的二維碼,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
使用鏈接生成二維碼主要是使用qr.js或者其他，把鏈接轉(zhuǎn)化為二維碼的形式，在使用canvas時(shí)需要設(shè)置畫布的尺寸，生成的顏色。
<div class="qr_code">
<img src="" id="imgcode" />
<canvas ref="canvas" hidden></canvas>
<div>
js
function createQr () { // 生成帶圖片二維碼
const qrcode = qr('http://baidu.com') // 轉(zhuǎn)化鏈接
const canvas = this.$refs.canvas
const ctx = canvas.getContext('2d')
const size = 128 / qrcode.moduleCount //128設(shè)置的二維碼尺寸
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' // 設(shè)置二維碼顏色和背景顏色
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' //二維碼中間圖標(biāo)
image.onload = () => {
var dwidth = 128 * 0.2 // 設(shè)置圖片大小
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
}
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要為大家介紹了如何在TypeScript中使用函數(shù)實(shí)例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-11-11
Javascript設(shè)計(jì)模式之發(fā)布訂閱模式
發(fā)布---訂閱模式又叫觀察者模式，它定義了對(duì)象間的一種一對(duì)多的關(guān)系，讓多個(gè)觀察者對(duì)象同時(shí)監(jiān)聽某一個(gè)主題對(duì)象，當(dāng)一個(gè)對(duì)象發(fā)生改變時(shí)，所有依賴于它的對(duì)象都將得到通知2022-12-12
本文給大家介紹基于JS+Canvas 實(shí)現(xiàn)下雨下雪效果，效果非常逼真，適應(yīng)于各大網(wǎng)站，需要的朋友可以參考下2016-05-05
JavaScript創(chuàng)建類/對(duì)象的幾種方式概述及實(shí)例
JS中的對(duì)象強(qiáng)調(diào)的是一種復(fù)合類型，JS中創(chuàng)建對(duì)象及對(duì)對(duì)象的訪問是極其靈活的，下面與大家分享下創(chuàng)建類/對(duì)象的幾種方式，感興趣的朋友可以了解下哈2013-05-05
這篇文章將深入探討閉包和內(nèi)存泄漏之間的關(guān)系，并通過具體的代碼案例來證明閉包并不必然導(dǎo)致內(nèi)存泄漏，感興趣的小伙伴可以跟隨小編一起了解一下2023-06-06
使用js操作css實(shí)現(xiàn)js改變背景圖片示例
有個(gè)朋友在weibo上問我可不可以用JS和CSS讓頁(yè)面每次刷新隨機(jī)產(chǎn)生一張背景圖，當(dāng)然是可以的。具體的方法看下面的實(shí)現(xiàn)代碼吧2014-03-03
es6 filter() 數(shù)組過濾方法總結(jié)
這篇文章主要介紹了es6 filter() 數(shù)組過濾方法總結(jié)，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04
JS實(shí)現(xiàn)隨機(jī)顏色的3種方法與顏色格式的轉(zhuǎn)化
隨機(jī)顏色和顏色格式是我們?cè)陂_發(fā)中經(jīng)常要用到的一個(gè)小功能，網(wǎng)上相關(guān)的資料也很多，想著有必要總結(jié)一下自己的經(jīng)驗(yàn)。所以這篇文章主要介紹了JS實(shí)現(xiàn)隨機(jī)顏色的3種方法與顏色格式的轉(zhuǎn)化,需要的朋友可以參考借鑒，下面來一起看看吧。2017-01-01
等號(hào)和非等號(hào)的同類運(yùn)算符是全等號(hào)和非全等號(hào)。這兩個(gè)運(yùn)算符所做的與等號(hào)和非等號(hào)相同，只是它們?cè)跈z查相等性前，不執(zhí)行類型轉(zhuǎn)換。接下來通過本文給大家介紹JS中的全等和不全等、等于和不等于，一起看看吧2021-09-09
復(fù)制網(wǎng)頁(yè)內(nèi)容，粘貼之后自動(dòng)加上網(wǎng)址的實(shí)現(xiàn)方法(腳本之家特別整理)
復(fù)制內(nèi)容加網(wǎng)址的功能，自06年腳本之家將這個(gè)功能發(fā)布并通過blueidea宣傳以后，現(xiàn)如今很多網(wǎng)站都使用上了， 當(dāng)初我們也由這個(gè)功能帶來很多外鏈2014-10-10