cordova二維碼掃碼插件

image.png

插件原地址如下：
barcode-scanner-plugin

BarcodeScanner

  • src
    • android
      • com
      • LibraryProject
      • com.google.zxing.client.android.capture.jar
      • readme.md
        ...

主要目錄如上。
集成說明。
當(dāng)添加插件后，會將com.google.zxing.client.android.capture.jar文件拷貝到安卓項目的libs下，作為jar包使用。是zxing的打包，原文件就在LibraryProject中。

當(dāng)你不進過修改直接使用該插件時，其掃碼界面非常簡陋。我們?nèi)绾巫远x掃碼界面？

  • 修改原文件，在LibraryProject目錄中。

有兩個難點，一是如何修改，二是如何打包成jar。

打包jar

我們先看怎么打包。
該目錄下，我們看到ant.properties這個文件和config.xml文件。
如果你熟悉安卓開發(fā)就知道ant這個工具是做什么的，我猜測可能是打包工具，于是搜索了下ant，果然是我想的那樣。

如何使用ant？

  1. 下載ant的安裝包，這里是地址，下完后解壓縮。
  2. 配置環(huán)境變量（目的是使用ant命令），如何添加環(huán)境變量不多說，每個人的shell配置文件不同
vi ~/.zshrc
# ==> 添加下列代碼（注意修改自己的路徑）
# ant
export ANT_HOME=/Users/mrchen/Applications/apache-ant
export PATH=$PATH:$ANT_HOME/bin
  1. 打開新terminal窗口，ant -version，查看是否配置正確。

進入LibraryProject目錄下，使用ant命令打包jar文件。

cd LibraryProject
ant ij-release

生成的jar文件在：LibraryProject/bin/classes.jar
將該文件重命名并覆蓋com.google.zxing.client.android.capture.jar文件即可。

接下來將涉及源碼的修改，當(dāng)你知道怎么打包jar，源碼修改就好辦了。

圖片變形的問題

源碼修改主要是界面圖像和掃描界面。文件集中在src/com/google/zxing/client/android中，其他文件都是核心文件，如果了解zxing項目就會知道，這個插件作者整理了下，將核心和安卓代碼整合起來了。

主要做的改變是兩個。

  1. 固定為豎屏
  2. 修改camera的分辨率

文件：CameraConfigurationManager.java
initFromCameraParameters() => 這個方法主要是初始化camera的參數(shù)

第一步： 修改始終為豎屏（默認(rèn)是橫屏），將下面的代碼插入到
cameraResolution = findBestPreviewSizeValue(parameters, screenResolution);
之前，并將這一行改為
cameraResolution = findBestPreviewSizeValue(parameters, screenResolutionForCamera);

Point screenResolutionForCamera = new Point();
screenResolutionForCamera.x = screenResolution.x;
screenResolutionForCamera.y = screenResolution.y;
// preview size is always something like 480*320, other 320*480
if (screenResolution.x < screenResolution.y) {
  screenResolutionForCamera.x = screenResolution.y;
  screenResolutionForCamera.y = screenResolution.x;
}

第二步： 修改camera默認(rèn)參數(shù)
在方法findBestPreviewSizeValue中，會根據(jù)屏幕分辨率和攝像頭默認(rèn)參數(shù)（比如支持的拍攝分辨率），進行計算得到合適的camera分辨率。

修改 MAX_PREVIEW_PIXELS 參數(shù)的默認(rèn)值，該值是指定拍攝的分辨率，默認(rèn)的720p。
private static final int MAX_PREVIEW_PIXELS = 1920 * 1080; // 最大支持1080p的圖片

這里只需要在initFromCameraParameters 和 findBestPreviewSizeValue方法中修改即可。

掃碼框尺寸和位置修改

代碼位置
CameraManager.java
方法：Rect getFramingRect() => 獲取掃碼框尺寸位置參數(shù), return rect(left, top, left, bottom);

這里非常簡單，看下源碼就懂了

修改掃碼框邊框和掃描線條

代碼位置
ViewfinderView.java
void onDraw() => 使用的是canvas畫的掃描框和激光線條。示例代碼如下：

@Override
public void onDraw(Canvas canvas) {
    if (cameraManager == null) {
      return; // not ready yet, early draw before done configuring
    }
    Rect frame = cameraManager.getFramingRect();
    if (frame == null) {
      return;
    }
    int width = canvas.getWidth();
    int height = canvas.getHeight();

    // Draw the exterior (i.e. outside the framing rect) darkened
    paint.setColor(resultBitmap != null ? resultColor : maskColor);
    canvas.drawRect(0, 0, width, frame.top, paint);
    canvas.drawRect(0, frame.top, frame.left, frame.bottom + 1, paint);
    canvas.drawRect(frame.right + 1, frame.top, width, frame.bottom + 1, paint);
    canvas.drawRect(0, frame.bottom + 1, width, height, paint);

    // change.cf
    paint.setColor(frameAngleColor);

    canvas.drawRect(frame.left, frame.top, frame.left + 60, frame.top + 20, paint);
    canvas.drawRect(frame.left, frame.top, frame.left + 20, frame.top + 60, paint);

    canvas.drawRect(frame.right - 60, frame.top, frame.right, frame.top + 20, paint);
    canvas.drawRect(frame.right - 20, frame.top, frame.right, frame.top + 60, paint);

    canvas.drawRect(frame.left, frame.bottom - 60, frame.left + 20, frame.bottom, paint);
    canvas.drawRect(frame.left, frame.bottom - 20, frame.left + 60, frame.bottom, paint);

    canvas.drawRect(frame.right - 20, frame.bottom - 60, frame.right, frame.bottom, paint);
    canvas.drawRect(frame.right - 60, frame.bottom - 20, frame.right, frame.bottom, paint);

    Log.i("ViewfinderView", "**** draw rect angle ****");

    // change.end

    if (resultBitmap != null) {
      // Draw the opaque result bitmap over the scanning rectangle
      paint.setAlpha(CURRENT_POINT_OPACITY);
      canvas.drawBitmap(resultBitmap, null, frame, paint);

    } else {

      // Draw a red "laser scanner" line through the middle to show decoding is active
      paint.setColor(laserColor);
      paint.setAlpha(SCANNER_ALPHA[scannerAlpha]);
      scannerAlpha = (scannerAlpha + 1) % SCANNER_ALPHA.length;
      // int middle = frame.height() / 2 + frame.top;
      // canvas.drawRect(frame.left + 2, middle - 1, frame.right - 1, middle + 2, paint);

      canvas.drawRect(frame.left + 2, frame.top + laserPosition - 4, frame.right + 2, frame.top + laserPosition + 4, paint);

      laserPosition += laserSpeed;
      if (laserPosition > frame.height()) {
        laserSpeed = -20;
        laserPosition = frame.height();
      }

      if (laserPosition < 0) {
        laserSpeed = 20;
        laserPosition = 0;
      }

      /*Rect previewFrame = cameraManager.getFramingRectInPreview();
      float scaleX = frame.width() / (float) previewFrame.width();
      float scaleY = frame.height() / (float) previewFrame.height();

      List<ResultPoint> currentPossible = possibleResultPoints;
      List<ResultPoint> currentLast = lastPossibleResultPoints;
      int frameLeft = frame.left;
      int frameTop = frame.top;
      if (currentPossible.isEmpty()) {
        lastPossibleResultPoints = null;
      } else {
        possibleResultPoints = new ArrayList<ResultPoint>(5);
        lastPossibleResultPoints = currentPossible;
        paint.setAlpha(CURRENT_POINT_OPACITY);
        paint.setColor(resultPointColor);
        synchronized (currentPossible) {
          for (ResultPoint point : currentPossible) {
            canvas.drawCircle(frameLeft + (int) (point.getX() * scaleX),
              frameTop + (int) (point.getY() * scaleY),
              POINT_SIZE, paint);
          }
        }
      }
      if (currentLast != null) {
        paint.setAlpha(CURRENT_POINT_OPACITY / 2);
        paint.setColor(resultPointColor);
        synchronized (currentLast) {
          float radius = POINT_SIZE / 2.0f;
          for (ResultPoint point : currentLast) {
            canvas.drawCircle(frameLeft + (int) (point.getX() * scaleX),
              frameTop + (int) (point.getY() * scaleY),
              radius, paint);
          }
        }
      }*/

      // Request another update at the animation interval, but only repaint the laser line,
      // not the entire viewfinder mask.
      postInvalidateDelayed(ANIMATION_DELAY,
        frame.left - POINT_SIZE,
        frame.top - POINT_SIZE,
        frame.right + POINT_SIZE,
        frame.bottom + POINT_SIZE);
    }
}

很簡單，可以自己隨便發(fā)揮畫。注意上面代碼我增加了幾個變量。

private int laserPosition = 0;
private int laserSpeed = 20;
private int frameAngleColor = resources.getColor(fakeR.getId("color", "frame_angle"));

并且在res文件夾下的colors.xml中新增一條。

    <color name="frame_angle">#feee00</color>

說明

修改后的源代碼地址 =>
百度云

使用方法，解壓縮后，添加到cordova插件中

cordova plugin add <your_barcode_scanner_path>

$(function() {
  $('.scan-btn').click(function() {

   cordova.plugins.barcodeScanner.scan(
    function (result) {
      alert("We got a barcode\n" +
        "Result: " + result.text + "\n" +
        "Format: " + result.format + "\n" +
        "Cancelled: " + result.cancelled);
    },
    function (error) {
      alert("Scanning failed: " + error);
    },
    {
      preferFrontCamera : false, // iOS and Android
      showFlipCameraButton : false, // iOS and Android
      showTorchButton : false, // iOS and Android
      torchOn: false, // Android, launch with the torch switched on (if available)
      prompt : "Place a barcode inside the scan area", // Android
      resultDisplayDuration: 0, // Android, display scanned text for X ms. 0 suppresses it entirely, default 1500
      formats : "QR_CODE,PDF_417", // default: all but PDF_417 and RSS_EXPANDED
      orientation : "portrait", // Android only (portrait|landscape), default unset so it rotates with the device
      disableAnimations : true, // iOS
      disableSuccessBeep: false // iOS
    }
    );
 });
});

示例項目地址 =>
coding.cordova_test
項目比較小，測試用，不是很完整，ignore文件什么都沒有配，所以插件所有文件都上傳上去了的。

示例apk下載 =>
cordova_test.apk
可以試試哦??

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • Android 自定義View的各種姿勢1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 178,733評論 25贊 709
  • Spring Boot 參考指南 介紹 轉(zhuǎn)載自:https://www.gitbook.com/book/qbgb...
    毛宇鵬閱讀 47,253評論 6贊 342
  • 2017年1月18日 今天回劇組去看了一眼，然后布布說我昨天下午沒在他都覺得工作不順了。哈哈哈哈，看來我也是不可或...
    一字記之曰沉閱讀 201評論 0贊 0
  • 你給予我 是城墻給予城門 是深海給予孤島 是暗夜給予繁星 是天地給予巨像 是草木給予詩歌 是眾神給予朝圣 新雨給予...
    戒涼閱讀 475評論 2贊 5
  • 第一輪評課上完了，感謝大家的厚愛，有背后曹老師和孩子們的支持，有現(xiàn)場評課老師給出的寶貴建議，方感要細(xì)細(xì)研磨，...
    如水的日記閱讀 229評論 0贊 0

友情鏈接更多精彩內(nèi)容