扫描二维码 从相机扫描识别不到的问题

扫描二维码 从相机扫描识别不到的问题

前言

最近做了一个扫描二维码的项目 要求可以从相册中扫描 做出来之后 发现从相扫描二维码时好时坏
后来发现了原因

原因

原因尽然不是代码的问题 也不是环境的问题
而是！！！！
二维码在页面中太大了！！！！！！
这样会导致识别的时候不能识别到完整的整个二维码
所以 二维码在页面中要小一点
不好：

好

代码

import React, { PureComponent } from 'react';
let barcode = null
export default class scanPage extends PureComponent {
  // plus准备工作
  componentDidMount() {
    if (window.plus) {
      this.plusReady();
    } else {
      document.addEventListener('plusready', this.plusReady, false);
    }
  }
  // 卸载组件时 释放扫码组件资源
  componentWillUnmount() {
    barcode&&barcode.close();
    barcode = null;
  }
  // plusReady h5+必备
  plusReady = () => {
    // 在这里调用plus api
    this.creatBarCode()
  }
  // 创建barcode控件
  creatBarCode() {
    if (!barcode) {
      barcode = plus.barcode.create('barcode', [plus.barcode.QR], {
        background: '#fff',
        frameColor: '#07c160',
        scanbarColor: '#07c160',
        top: '100px',
        left: '0px',
        width: '100%',
        height: '580px',
        position: 'static'
      });
      barcode.onmarked = this.onmarked//扫码成功
      barcode.onerror = this.onerror//扫码失败
      plus.webview.currentWebview().append(barcode);//必要的
    }
    barcode.start();
  }
  // 识别成功
  onmarked(type, result) {
    alert('扫描结果:' + result)
  }
  // 识别失败
  onerror(err){
    alert("扫码失败");
    console.log('扫码失败',JSON.stringify(err)) 
    barcode&&barcode.close();
    barcode = null;
  }
  // 从相册中选择
  scanFromPic() {
    let that=this
    plus.gallery.pick(function (path) {
      plus.barcode.scan(path, that.onmarked, that.onerror);
    }, function (err) {
      alert('选择相片失败: ' + JSON.stringify(err.message));
    });
  }
  render() {
    return (
      <div >
        <div style={{marginTop:70+'px',textAlign:'right'}} onClick={this.scanFromPic.bind(this)}>从相册选择</div>
        <div id="barcode"></div>
      </div>
    )
  }
}