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

 },
 
相关推荐
hongweihao11 小时前
儿子不收拾玩具,我用AI给他量身定制开发一个APP,这下舒服了
uni-app·app·ai编程
Hashan12 小时前
微信小程序:扁平化的无限级树
前端·微信小程序·uni-app
小徐_233312 小时前
uni-app 无法实现全局 Toast?这个方法做到了!
前端·uni-app
xixixin_13 小时前
【HTML】在页面中画一条0.5px的线
前端·css·uni-app·html·css3
&白帝&14 小时前
Uniapp 自定义头部导航栏
前端·javascript·uni-app
&白帝&14 小时前
Uniapp 条件编译详解
uni-app
xkxnq19 小时前
uniapp跨端性能优化方案
uni-app
速易达网络19 小时前
基于UniApp的新大陆物联网平台温湿度检测系统开发方案
物联网·uni-app
har01d1 天前
在 uniapp 里使用 unocss,vue3 + vite 项目
前端·uni-app·vue·uniapp·unocss
paopaokaka_luck1 天前
校园快递小程序(腾讯地图API、二维码识别、Echarts图形化分析)
vue.js·spring boot·后端·小程序·uni-app