在開發掃描二維碼過程中,發現白底黑碼可以直接用uni.scanCode掃描出來,但是黑底白碼就掃不出來,于是就試試反色后的二維碼能不能掃描出來,沒想到真的可以,下面附上完整代碼:
<u-icon name="scan" size="40" width="40" height="40" @click="scanCodeClick"></u-icon>
<canvas canvas-id="myCanvas" style="width: 300px; height: 400px;"></canvas>// 點擊掃描
scanCodeClick() {const vm = thisuni.chooseImage({sourceType: ['camera'],count: 1,success: (res) => {const filePath = res.tempFilePaths[0];uni.getImageInfo({src: filePath,success: function(imageInfo) {const ctx = uni.createCanvasContext('myCanvas', vm);const imgUrl = filePath; // 獲取拍照后的圖片路徑// 繪制原始圖片到Canvasctx.drawImage(imgUrl, 0, 0, 300, 400);ctx.draw(false, () => {uni.canvasGetImageData({canvasId: 'myCanvas',x: 0,y: 0,width: 300,height: 400,success(res) {vm.invertColors(res)}})});}});}});},// 反色并重新繪制invertColors(info) {const dataArray = info.data;// 遍歷每個像素點,進行反色處理for (let i = 0; i < dataArray.length; i += 4) {dataArray[i] = 255 - dataArray[i]; // 紅色值取反dataArray[i + 1] = 255 - dataArray[i + 1]; // 綠色值取反dataArray[i + 2] = 255 - dataArray[i + 2]; // 藍色值取反// dataArray[i + 3] 是透明度值,這里不做處理}const code = jsQR(dataArray, 300, 400);console.log(code)// return// 將處理后的圖像數據重新繪制到canvas上uni.canvasPutImageData({canvasId: 'myCanvas',x: 0, // 繪制起始x坐標y: 0, // 繪制起始y坐標width: 300,height: 400,data: dataArray,success: (e) => {console.log('反色處理成功');},fail: (err) => {console.error('反色處理失敗',err.errMsg ||'未知錯誤');},});},