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 ||
                 '未知错误');
         },
     });

 },
 
相关推荐
2501_915918419 小时前
iOS WebView 调试实战 localStorage 与 sessionStorage 同步问题全流程排查
android·ios·小程序·https·uni-app·iphone·webview
前端程序猿-秦祥13 小时前
uniapp打开导航软件并定位到目标位置的实现
前端·uni-app·vue·导航
脑袋大大的14 小时前
跨端分栏布局:从手机到Pad的优雅切换
javascript·uni-app·uniapp·安卓·鸿蒙·app开发·混合开发
paopaokaka_luck16 小时前
基于SpringBoot+Uniapp的非遗文化宣传小程序(AI问答、协同过滤算法、Echarts图形化分析)
java·vue.js·spring boot·后端·学习·小程序·uni-app
阿凤2117 小时前
uniapp请求封装上传
前端·uni-app
紫眸少年丶20 小时前
uni-app开发小程序,根据图片提取主题色值
前端·小程序·uni-app
禾苗种树20 小时前
uniapp使用uni-ui怎么修改默认的css样式比如多选框及样式覆盖小程序/安卓/ios兼容问题
css·ui·uni-app·scss
一个假的前端男21 小时前
uniapp app打包流程
uni-app
前端程序猿-秦祥21 小时前
uniapp 报错 Not found ... at view.umd.min.js:1的问题
前端·uni-app·安卓