国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

使用 qrcodejs 生成二維碼的幾個問題

Lyux / 2002人閱讀

摘要:在這里的用法如下微信中多個二維碼在一起識別錯誤這個問題,我也遇到了,根據(jù)網(wǎng)友的提示,微信是截屏識別的,所以會出現(xiàn)這種問題。示例代碼這里代碼跟前面脫節(jié)了,是另外的結(jié)構(gòu),僅作為示例代碼是類似的一些的匯總對象微信中有兩個挨著二維碼長按識別的問題

博客地址

Preface

產(chǎn)品希望我這邊下載頁面加個二維碼,可以掃描下載 APP,并且希望二維碼中有公司的 logo,很合理的需求,不過實(shí)現(xiàn)的時候依舊遇到了幾個問題,在此記錄下。

Main

二維碼的實(shí)現(xiàn)邏輯我當(dāng)然沒有這個時間去研究,直接用的 qrcodejs。官方給的 demo 是最簡單的版本,各種各樣的需求都是在 issues 里找到的提示,似乎這個庫已經(jīng)很久沒有人去維護(hù)了,雖然 star 是很多。

官網(wǎng)示例(改編)
.qrcode {
  width: 150px;
  height: 150px;
  border: 2px solid green;
  margin-top: 15px;
}
let qrcodeEl = document.getElementById("qrcode")
let qrcode = new QRCode(qrcodeEl, {
  text: "https://avatars1.githubusercontent.com/u/23273077",
  width: 128,
  height: 128,
  colorDark: "#000000",
  colorLight: "#ffffff",
  correctLevel: QRCode.CorrectLevel.H
})

效果如圖:

尺寸控制

我給官網(wǎng)的示例加上了邊框,二維碼的尺寸和 js 里的尺寸不一樣,這個缺點(diǎn)立馬就暴露出來了。

我很可能是想生成的二維碼填滿傳入的 qrcode 元素的,但是這里的 width 不支持 100%,更不支持 vw 這種尺寸單位了。當(dāng)然,我可以用 qrcode.offsetWidth 來解決這個問題,但是如果 qrcode 的尺寸后期會動態(tài)修改的話,那不還是會有問題么。

經(jīng) SO 的提示,發(fā)現(xiàn)了一個好方案,

.qrcode {
  width: 150px;
  height: 150px;
  border: 2px solid green;
  margin-top: 15px;
}
.qrcode canvas + img {
  width: 100%;
  height: 100%;
}

這樣就可以了,不過仍然有個不足,就是二維碼有失真。經(jīng)測試,只有傳入的尺寸和 qrcode 的尺寸一樣時,才不會失真,所以傳入的尺寸還是需要動態(tài)計(jì)算。

加 logo 的二維碼

qrcodejs 并沒有提供這個 API,issues 里有人給了 demo,其實(shí)就是在原有元素上覆蓋一個 logo 就可以了,雖然遮蓋了原有二維碼的一部分,但是實(shí)測并不影響掃描。不過我沒有進(jìn)行大規(guī)模測試,可能會有一定的錯誤率。

.qrcode {
  width: 150px;
  height: 150px;
  border: 2px solid green;
  margin-top: 15px;
  position: relative;
}

.qrcode canvas + img {
  width: 100%;
  height: 100%;
}
.qrcode__logo {
  width: 50px;
  height: 50px;
  border-radius: 10%;
  border: 1px solid #fff;
  position: absolute;
  margin: auto;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
}

效果如圖:

檢測二維碼的生成

某些情況下,我需要重用二維碼,在這種情況下,我發(fā)現(xiàn),二維碼的生成是異步的,譬如:

let qrcodeEl = document.getElementById("qrcode")
let qrcode = new QRCode(qrcodeEl, {
  text: "https://avatars1.githubusercontent.com/u/23273077",
  width: 200,
  height: 200,
  colorDark: "#000000",
  colorLight: "#ffffff",
  correctLevel: QRCode.CorrectLevel.H
})
let qrcodeImg = document.querySelectorAll(".qrcode canvas+img")
console.log("qrcodeImg.src", qrcodeImg.src)
setTimeout(function() {
  console.log("qrcodeImg.src", qrcodeImg.src)
}, 1000)

第一個日志就是空白的,第二個才有 base64。搞笑的是,qrcodejs 也沒有給出回調(diào)或者通知告訴用戶什么時候生成完畢。

這個問題也是在 issues 里找到的提示,關(guān)鍵點(diǎn)在于 MutationObserver。

這個 API 很少在項(xiàng)目中用,因?yàn)椴患嫒菪?ie11-,但是有時在幾千行代碼里 debug 時會用,尤其是我懷疑中間有代碼改了某個元素的屬性,確又找不到證據(jù)或者找不到哪段代碼時,會用這個來監(jiān)測下。在這里的用法如下:

let qrcodeEl = document.getElementById("qrcode")
let qrcode = new QRCode(qrcodeEl, {
  text: "https://avatars1.githubusercontent.com/u/23273077",
  width: 200,
  height: 200,
  colorDark: "#000000",
  colorLight: "#ffffff",
  correctLevel: QRCode.CorrectLevel.H
})
let qrcodeImg = document.querySelector(".qrcode canvas+img")
listenQrcodeSrc()
function listenQrcodeSrc() {
  var observeConfig = { attributes: true }
  var observeCb = function(mutationsList, observer) {
    mutationsList.forEach(function(mutation) {
      if (
        mutation.type.toLowerCase() === "attributes" &&
        mutation.attributeName.toLowerCase() === "src"
      ) {
        console.log("qrcodeImg src done!", mutation.target.src)
        observer.disconnect()
      }
    })
  }
  if (typeof MutationObserver !== "undefined") {
    var observer = new MutationObserver(observeCb)
    observer.observe(qrcodeImg, observeConfig)
  }
}
微信中多個二維碼在一起識別錯誤

這個問題,我也遇到了,根據(jù)網(wǎng)友的提示,微信是截屏識別的,所以會出現(xiàn)這種問題。我測試的結(jié)果是,左右兩個,永遠(yuǎn)識別的右邊的那個。網(wǎng)上有好幾種方案:

調(diào)透明度和層級

最初嘗試過,結(jié)果發(fā)現(xiàn)失敗,等到成功的時候,透明度已經(jīng)小于 0.5 了,視覺差異太明顯,所以放棄了這個方案。

替換二維碼

最終采取的是這個,這個也有問題,就是用戶會看到二維碼變化的過程,除非你把多個二維碼做得很像。

假設(shè),我們要顯示兩個二維碼,所謂替換二維碼,其實(shí)也就是在多個 img.src 屬性里切換,可以把實(shí)際的二維碼保存在 data-real-src 屬性里,然后在用戶 touchstart 事件中,替換另一個 imgsrc 為當(dāng)前按下的這個,然后在 touchend 事件中再改回來,因?yàn)樵瓉淼牡刂范急4嬖?data-real-src 屬性里。

這里就用到了前面提到的檢測 src 屬性來判斷 qrcode 生成完畢,否則一開始直接把 src 屬性賦給 data-real-src 屬性,就是空白。

示例代碼(這里代碼跟前面脫節(jié)了,dom 是另外的結(jié)構(gòu),僅作為示例代碼):

//* pubMethods 是類似 jq 的一些 API 的匯總對象
var qrcodeImgs = pubMethods.$(".download__qrcode-box canvas+img")
listenQrcodeSrc()
var downloadBox = pubMethods.$(".download")[0]
downloadBox.addEventListener("touchstart", changeQrcodeSrcToOne)
downloadBox.addEventListener("touchend", changeQrcodeSrcBack)
downloadBox.addEventListener("touchcancel", changeQrcodeSrcBack)

function listenQrcodeSrc() {
  var observeConfig = { attributes: true }
  var observeCb = function(mutationsList, observer) {
    mutationsList.forEach(function(mutation) {
      if (
        mutation.type.toLowerCase() === "attributes" &&
        mutation.attributeName.toLowerCase() === "src"
      ) {
        mutation.target.setAttribute("data-real-src", mutation.target.src)
        observer.disconnect()
      }
    })
  }
  qrcodeImgs.forEach(function(ele) {
    if (typeof MutationObserver !== "undefined") {
      var observer = new MutationObserver(observeCb)
      observer.observe(ele, observeConfig)
    }
  })
}
function changeQrcodeSrcToOne(event) {
  var target = event.target
  var getQrcodeBox = pubMethods.closest(
    target,
    ".download__qrcode-box",
    downloadBox
  )
  if (getQrcodeBox) {
    var targetImg = qrcodeImgs.filter(function(ele) {
      return getQrcodeBox.contains(ele)
    })[0]
    qrcodeImgs.forEach(function(ele) {
      ele.src = targetImg.getAttribute("data-real-src")
    })
  }
}
function changeQrcodeSrcBack(event) {
  qrcodeImgs.forEach(function(ele) {
    ele.src = ele.getAttribute("data-real-src")
  })
}
Ending Reference

Make qr code full width

微信中有兩個挨著二維碼長按識別的問題?

文章版權(quán)歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址:http://specialneedsforspecialkids.com/yun/99324.html

相關(guān)文章

  • 使用JavaScript生成維碼教程-附qrcodejs中文文檔

    摘要:使用生成二維碼依賴需要使用到的庫至此一個簡單的二維碼就生成了接下來我們就詳細(xì)了解一下這個庫到底為我們提供了哪些參數(shù)配置和方法配置名稱默認(rèn)值類型說明顯示二維碼的元素或該元素的參數(shù)配置名稱默認(rèn)值類型說明需要生成的二維碼內(nèi)容圖像寬度圖像高度前 使用javascript生成二維碼 依賴jquery 需要使用到的庫 https://github.com/davidshimj... DIV j...

    oneasp 評論0 收藏0
  • vue 2.x項(xiàng)目 vue-qriously 生成維碼并下載、cliploard復(fù)制粘貼

    摘要:近日,重構(gòu)項(xiàng)目某一老模塊時,有一個功能是生成二維碼并下載,還可以復(fù)制鏈接。先想著新模塊中是否有生成二維碼的插件,看了下。項(xiàng)目中封裝了一個指令。一份用來顯示的。順帶說一下,復(fù)制粘貼復(fù)制粘貼老模塊中是用的倉庫。 近日,重構(gòu)項(xiàng)目某一老模塊時,有一個功能是生成二維碼并下載,還可以復(fù)制鏈接。列表每項(xiàng)都有二維碼、下載二維碼和復(fù)制鏈接和列表上方總的二維碼。老模塊是用的qrocode中文文檔,qrco...

    littlelightss 評論0 收藏0
  • 微信小程序生成維碼工具

    摘要:微信小程序生成二維碼工具生成二維碼數(shù)據(jù)的主要代碼來自,因?yàn)樗@個里面生成二維碼圖片的功能在微信小程序里不能使用,我將這個功能改寫成可以在微信小程序中使用。 weapp-qrcode 微信小程序生成二維碼工具 生成二維碼數(shù)據(jù)的主要代碼來自davidshimjs/qrcodejs,因?yàn)樗@個里面生成二維碼圖片的功能在微信小程序里不能使用,我將這個功能改寫成可以在微信小程序中使用。 截圖 s...

    Rocture 評論0 收藏0
  • 移動端h5開發(fā)相關(guān)內(nèi)容總結(jié)(四)

    摘要:主要原因是除了安卓和系統(tǒng)的寫法不同外,不同系統(tǒng)版本寫法也不同。在安卓上是默認(rèn)不開啟想磁盤寫文件的權(quán)限的。最好維護(hù)一個系統(tǒng)無法正常推起輸入框的軟件列表可以通過的來獲取軟件的唯一標(biāo)識。 前言: 看了下博客的更新時間,發(fā)現(xiàn)9月份一篇也沒有更新。一直想著都要抽時間寫一篇的,不然今年的更新記錄就會斷在了9月份。但是還是應(yīng)為各種各樣的事情給耽擱了。當(dāng)內(nèi)心突然涌起一股必須寫點(diǎn)什么的時候,突然發(fā)現(xiàn)自己...

    MAX_zuo 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<