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

如何从Cordova Camera Preview Plugin获取照片?,第1张

概述我正在使用这个插件 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.

这是错误图像:

这是我的HTML

<div >  <div >    <button ID="startCamerabutton">Start Camera at back</button>    <button ID="stopCamerabutton">Stop Camera</button>  </div>  <div >    <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 >    <button ID="takePicturebutton">Take Picture</button>    <button ID="switchCamerabutton">Switch Camera</button>  </div>  <div >    <button ID="hIDebutton">HIDe</button>    <button ID="showbutton">Show</button>  </div></div><div >  <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);
解决方法 为了使图片可用,它需要临时“存储”,无论是正确的格式还是正确的路径.以下是基于承诺的函数的示例:

public base64Image: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}}">
总结

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

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

欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/web/1002007.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2022-05-22
下一篇 2022-05-22

发表评论

登录后才能评论

评论列表(0条)

保存