大佬教程收集整理的这篇文章主要介绍了如何从Cordova Camera Preview Plugin获取照片?,大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
当我拍照时,我收到了一个错误.我不知道如何从这个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,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.@R_674_8798@ge = 'Problem accessing the camera ' + err; }); }
这里,base64Image是图像的路径,您可以在img标记中使用它:
<img src="{{Base64ImagE}}">
以上是大佬教程为你收集整理的如何从Cordova Camera Preview Plugin获取照片?全部内容,希望文章能够帮你解决如何从Cordova Camera Preview Plugin获取照片?所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。