Как получить фото с плагина предварительного просмотра камеры Cordova?

Question

Я использую этот плагин 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, 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); 

Answer 1

для того, чтобы изображение, чтобы можно было использовать , он должен быть «сохранен» временно, как в правильном формате, так и с правильным путем. Ниже приведен пример функции, основанной на обещаниях:

общественная база64Image: 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}}">