uniapp扫描二维码反色处理

在开发扫描二维码过程中,发现白底黑码可以直接用uni.scanCode扫描出来,但是黑底白码就扫不出来,于是就试试反色后的二维码能不能扫描出来,没想到真的可以,下面附上完整代码:

javascript 复制代码
<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 = this
     uni.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; // 获取拍照后的图片路径
                     // 绘制原始图片到Canvas
                     ctx.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 ||
                 '未知错误');
         },
     });

 },
 
相关推荐
小溪彼岸21 小时前
uni-app小白从0开发一款鸿蒙Next应用到上线
uni-app·harmonyos
一颗小青松1 天前
uniapp app端使用uniCloud的unipush
uni-app
cngm1101 天前
uniapp+springboot后端跨域以及webview中cookie调试
spring boot·后端·uni-app
iOS阿玮2 天前
“死了么”App荣登付费榜第一名!
uni-app·app·apple
wendycwb2 天前
uni-app 在真机中canvas绘制的元素悬浮,内容不随父组件滚动问题
uni-app
frontend_frank2 天前
脱离 Electron autoUpdater:uni-app跨端更新:Windows+Android统一实现方案
android·前端·javascript·electron·uni-app
三天不学习2 天前
UniApp三端实时通信实战:SignalR在H5、APP、小程序的差异与实现
微信小程序·uni-app·signalr
念你那丝微笑2 天前
uView Plus + Vue3 + TypeScript + UniApp 正确引入 UnoCSS(避坑版)
vue.js·typescript·uni-app
念你那丝微笑2 天前
vue3+ts在uniapp项目中实现自动导入 ref 和 reactive
vue.js·typescript·uni-app
游戏开发爱好者82 天前
如何使用 AppUploader 提交上传 iOS 应用
android·ios·小程序·https·uni-app·iphone·webview