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

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

前言

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

原因

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

好

代码

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>
    )
  }
}