uniapp扫描二维码反色处理
在开发扫描二维码过程中,发现白底黑码可以直接用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 ||'未知错误');},});},