如何从 Cordova 相机预览插件中获取照片？

Question

我正在使用这个插件Cordova相机预览插件

当我拍照时，出现了一个错误。我不知道如何从这个URL中读取图像，我想要该图像的Base64编码。

这是出错的图片：

以下是我的HTML代码：

<div class="controls">
  <div class="block">
    <button id="startCameraButton">Start Camera at back</button>
    <button id="stopCameraButton">Stop Camera</button>
  </div>

  <div class="block">
    <p><button id="startCameraAnotherPosButton">Start Camera at front</button></p>

    <p>Color Effect:
    <select id="colorEffectCombo">
      <option selected value="none">None</option>
      <option value="aqua">Aqua</option>
      <option value="blackboard">Blackboard</option>
      <option value="mono">Mono</option>
      <option value="negative">Negative</option>
      <option value="posterize">Posterize</option>
      <option value="sepia">Sepia</option>
      <option value="solarize">Solarize</option>
      <option value="whiteboard">Whiteboard</option>
    </select>
    </p>
  </div>
  <div class="block">
    <button id="takePictureButton">Take Picture</button>
    <button id="switchCameraButton">Switch Camera</button>
  </div>
  <div class="block">
    <button id="hideButton">Hide</button>
    <button id="showButton">Show</button>
  </div>
</div>
<div class="pictures">
  <p><img id="previewPicture" width="200"/></p>
  <p><img id="originalPicture" width="200"/></p>
</div>

这是我的app.js文件

var app = {
  startCamera: function(){
    console.log('starting camera');
    // var tapEnabled = true; //enable tap take picture
    var dragEnabled = true; //enable preview box drag across the screen
    // var toBack = true; //send preview box to the back of the webview
    var rect = {x: 100, y: 100, width: 300, height:300};
    cordova.plugins.camerapreview.startCamera(rect, "front", dragEnabled)
  },
  stopCamera: function(){
    cordova.plugins.camerapreview.stopCamera();
  },

  startCameraAnotherPos: function(){
    cordova.plugins.camerapreview.startCamera({x: 50, y: 100, width: 300, height:300, camera: "back", tapPhoto: true, previewDrag: true, toBack: false});
  },

  takePicture: function(){
    console.log('taking picture..');
    cordova.plugins.camerapreview.takePicture({maxWidth: 640, maxHeight: 640});
  },

  takepicturehandler: function(){
    console.log('taking..');
  },

  switchCamera: function(){
    cordova.plugins.camerapreview.switchCamera();
  },

  show: function(){
    cordova.plugins.camerapreview.show();
  },

  hide: function(){
    cordova.plugins.camerapreview.hide();
  },

  colorEffectChanged: function(){
    var effect = document.getElementById('colorEffectCombo').value;
    cordova.plugins.camerapreview.setColorEffect(effect);
  },


  init: function(){
    document.getElementById('startCameraButton').addEventListener('click', this.startCamera, false);
    document.getElementById('startCameraAnotherPosButton').addEventListener('click', this.startCameraAnotherPos, false);

    document.getElementById('stopCameraButton').addEventListener('click', this.stopCamera, false);
    document.getElementById('takePictureButton').addEventListener('click', this.takePicture, false);
    document.getElementById('switchCameraButton').addEventListener('click', this.switchCamera, false);
    document.getElementById('showButton').addEventListener('click', this.show, false);
    document.getElementById('hideButton').addEventListener('click', this.hide, false);
    document.getElementById('colorEffectCombo').addEventListener('change', this.colorEffectChanged, false);

    cordova.plugins.camerapreview.setOnPictureTakenHandler(function(result){
      console.log(result);
      document.getElementById('originalPicture').src = result[0];//originalPicturePath;
      document.getElementById('previewPicture').src = result[1];//previewPicturePath;
  });

  }
};

document.addEventListener('deviceready', function(){  
  app.init();
}, false);

- gauravmehla

---

我其实也需要同样的东西，但是无法运行插件。你是如何让它运行的？你测试的 Android 版本是什么？在 6.0 上，这个插件有一个权限 bug，对我来说有点无用。请参考 https://github.com/cordova-plugin-camera-preview/cordova-plugin-camera-preview/issues/128 - Marko

我正在Android 7.0上使用这个插件。最终，我现在能够获取图片了。我直接从返回的URL中读取文件并将其转换为base64。但是图片质量非常差。如果您找到解决方案，请告诉我@Marko。 查看此链接 - gauravmehla

我现在没有使用那个插件，我用了另一个。但是我所做的是，不是在预览中显示该图像，而是使用FileReader读取该路径并直接将其转换为base64。通过这样做，我能够获得该图像的base64编码。然后我将该base64发送到服务器并保存在S3上。我会与您分享那段代码点击这里。 - gauravmehla

这是代码：https://drive.google.com/file/d/0B__NWg94G1XAdXJiSUZvb2J4SUk/view - gauravmehla

好的，明白了。我浪费了一整天的时间尝试使用那个插件，它让人头疼。我会尝试不同的方法，希望能让它正常工作。 - Marko

Answer 1

为了让图片可用，它需要以正确的格式和正确的路径“临时存储”。以下是一个基于Promise的函数示例： public base64Image: any; public message: any;

takePicture() {
    this.cameraPreview.takePicture({
      quality: 50
    }).then((imageData) => {
      this.base64Image = 'data:image/jpeg;base64,' + imageData;
    }, (err) => {
      this.message = 'Problem accessing the camera ' + err;
    });
  }

这里的base64Image是您图像的路径，您可以在img标签中使用它：

<img src="{{base64Image}}">

- EnzodeLR