插件原地址如下：
barcode-scanner-plugin
BarcodeScanner
- src
- android
- com
- LibraryProject
- com.google.zxing.client.android.capture.jar
- readme.md
...
- android
主要目录如上。
集成说明。
当添加插件后，会将com.google.zxing.client.android.capture.jar文件拷贝到安卓项目的libs下，作为jar包使用。是zxing的打包，原文件就在LibraryProject中。
当你不进过修改直接使用该插件时，其扫码界面非常简陋。我们如何自定义扫码界面？
- 修改原文件，在LibraryProject目录中。
有两个难点，一是如何修改，二是如何打包成jar。
打包jar
我们先看怎么打包。
该目录下，我们看到ant.properties这个文件和config.xml文件。
如果你熟悉安卓开发就知道ant这个工具是做什么的，我猜测可能是打包工具，于是搜索了下ant，果然是我想的那样。
如何使用ant？
- 下载ant的安装包，这里是地址，下完后解压缩。
- 配置环境变量（目的是使用ant命令），如何添加环境变量不多说，每个人的shell配置文件不同
vi ~/.zshrc
# ==> 添加下列代码（注意修改自己的路径）
# ant
export ANT_HOME=/Users/mrchen/Applications/apache-ant
export PATH=$PATH:$ANT_HOME/bin
- 打开新terminal窗口，ant -version，查看是否配置正确。
进入LibraryProject目录下，使用ant命令打包jar文件。
cd LibraryProject
ant ij-release
生成的jar文件在：LibraryProject/bin/classes.jar
将该文件重命名并覆盖com.google.zxing.client.android.capture.jar文件即可。
接下来将涉及源码的修改，当你知道怎么打包jar，源码修改就好办了。
图片变形的问题
源码修改主要是界面图像和扫描界面。文件集中在src/com/google/zxing/client/android中，其他文件都是核心文件，如果了解zxing项目就会知道，这个插件作者整理了下，将核心和安卓代码整合起来了。
主要做的改变是两个。
- 固定为竖屏
- 修改camera的分辨率
文件：CameraConfigurationManager.java
initFromCameraParameters() => 这个方法主要是初始化camera的参数
第一步： 修改始终为竖屏（默认是横屏），将下面的代码插入到
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默认参数
在方法findBestPreviewSizeValue中，会根据屏幕分辨率和摄像头默认参数（比如支持的拍摄分辨率），进行计算得到合适的camera分辨率。
修改 MAX_PREVIEW_PIXELS 参数的默认值，该值是指定拍摄的分辨率，默认的720p。
private static final int MAX_PREVIEW_PIXELS = 1920 * 1080; // 最大支持1080p的图片
这里只需要在initFromCameraParameters 和 findBestPreviewSizeValue方法中修改即可。
扫码框尺寸和位置修改
代码位置
CameraManager.java
方法：Rect getFramingRect() => 获取扫码框尺寸位置参数, 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);
}
}
很简单，可以自己随便发挥画。注意上面代码我增加了几个变量。
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
可以试试哦😁
