我正在使用这个插件
当我拍照时,我收到了一个错误.我不知道如何从这个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);
最佳答案 为了使图片可用,它需要临时“存储”,无论是正确的格式还是正确的路径.以下是基于承诺的函数的示例：
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}}">
