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

 },
 
相关推荐
小时前端17 小时前
微信小程序选不了本地文件?用 web-view + H5 一招搞定
前端·微信小程序·uni-app
Mr_li1 天前
给 Vue 开发者的 uni-app 快速指南
vue.js·uni-app
anyup2 天前
🔥2026最推荐的跨平台方案:H5/小程序/App/鸿蒙,一套代码搞定
前端·uni-app·harmonyos
Mintopia2 天前
Vue3 项目如何迁移到 uni-app x:从纯 Web 到多端应用的系统指南
uni-app
Mintopia3 天前
uni-app x 发展前景技术分析:跨端统一的新阶段?
uni-app
不爱说话郭德纲3 天前
告别漫长的HbuilderX云打包排队!uni-app x 安卓本地打包保姆级教程(附白屏、包体积过大排坑指南)
android·前端·uni-app
HashTang5 天前
【AI 编程实战】第 12 篇:从 0 到 1 的回顾 - 项目总结与 AI 协作心得
前端·uni-app·ai编程
JunjunZ5 天前
uniapp 文件预览:从文件流到多格式预览的完整实现
前端·uni-app
郑州光合科技余经理5 天前
代码展示:PHP搭建海外版外卖系统源码解析
java·开发语言·前端·后端·系统架构·uni-app·php
TT_Close5 天前
“啪啪啪”三下键盘,极速拉起你的 uni-app 项目!
vue.js·uni-app·前端工程化