Cordova   发布时间:2022-05-03  发布网站:大佬教程  code.js-code.com
大佬教程收集整理的这篇文章主要介绍了如何从Cordova Camera Preview Plugin获取照片?大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。

概述

我正在使用这个插件 Cordova Camera Preview Plugin 当我拍照时,我收到了一个错误.我不知道如何从这个URL读取图像.我想要那个图像的base64. 这是错误图像: 这是我的HTML <div class="controls"> <div class="block"> <button id="startCameraButton">Start Camera at
我正在使用这个插件
Cordova Camera Preview Plugin

当我拍照时,我收到了一个错误.我不知道如何从这个URL读取图像.我想要那个图像的base64.

这是错误图像:

如何从Cordova Camera Preview Plugin获取照片?

这是我的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,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);

解决方法

@H_@L_673_9@_31@ 为了使图片可用,它需要临时“存储”,无论是正确的格式还是正确的路径.以下是基于承诺的函数的示例:

public base64Image:any;
公共信息:任何;

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

这里,base64Image是图像的路径,您可以在img标记中使用它:

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

大佬总结

以上是大佬教程为你收集整理的如何从Cordova Camera Preview Plugin获取照片?全部内容,希望文章能够帮你解决如何从Cordova Camera Preview Plugin获取照片?所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。