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_9159184110 小时前
TCP 抓包分析在复杂网络问题中的作用,从连接和数据流层面理解系统异常行为
网络·网络协议·tcp/ip·ios·小程序·uni-app·iphone
じòぴé南冸じょうげん10 小时前
APP本地调试正常,但是打包后出现账号密码解析错误,且前端未使用加密解密
小程序·uni-app·web app
快起来搬砖了13 小时前
UniApp 路由配置实战:从全局守卫到 404 页面优雅处理
uni-app
5335ld14 小时前
uniapp-APP端table列表左侧第一列固定、头部固定
windows·uni-app
一个假的前端男14 小时前
uni-app App 端长按录音的工程级实现
uni-app
无名前端小白15 小时前
uniapp 安卓离线打包, 无法调起系统安装应用
uni-app
游戏开发爱好者815 小时前
苹果 App 上架流程,结合 Xcode、CI 等常见工具
macos·ios·ci/cd·小程序·uni-app·iphone·xcode
2501_9151063215 小时前
用 HBuilder 上架 iOS 应用时如何管理Bundle ID、证书与描述文件
android·ios·小程序·https·uni-app·iphone·webview
2501_9159090615 小时前
资源文件混淆在 iOS 应用安全中的实际价值
android·安全·ios·小程序·uni-app·iphone·webview
2501_9159184115 小时前
iOS App 性能测试中常被忽略的运行期问题
android·ios·小程序·https·uni-app·iphone·webview