原因:在APP中,想实现拍照后,图片可以在页面中直接显示出来!这个使用cordova插件实现(cordova-plugin-camera)!详细用法请参考它的API文档!需要注意,有些图片,设置了src属性的值。可以还是没正常显示!
解决方案:
参考:http://bbs.wex5.com/forum.php?mod=viewthread&tid=91095
Model.prototype.takePicBtnClick = function(event){
if(!navigator.camera){
return;
}
var self = this;
navigator.camera.getPicture(onLoadImageSuccess, onLoadImageFail, {
destinationType:navigator.camera.DestinationType.DATA_URL,
allowEdit:true,
quality:80,
targetWidth:100,
targetHeight:100,
saveToPhotoAlbum:true
});
//拍照成功后回调
function onLoadImageSuccess(imageData){
localStorage.setItem("imageData","data:image/jpeg;base64,"+imageData);
var smallImage = document.getElementById(self.getIDByXID('image1'));
//显示图像
smallImage.style.display = 'block';
smallImage.src = "data:image/jpeg;base64,"+imageData;
//图片上传
self.uploadPic(imageData);
}
function onLoadImageFail(error){
alert(error);
}
};
方法2,通过获取本机的图片url 的方式
var sourceType =1;
var me = this;
function onSuccess(imageURI) {
localStorage.setItem("imageURI", imageURI);
function onSuccess(fileEntry) {
function win(file) {
me.comp("PicPopOver").hide();
var reader = new FileReader();
reader.onloadend = function(evt) {
console.log("read success");
console.log(evt.target.result);
$(me.getElementByXid("headurl")).attr("src", evt.target.result);
};
reader.readAsDataURL(file);
}
var fail = function(evt) {
me.comp("PicPopOver").hide();
window.plugins.toast.show('选择头像失败', "short", "center");
};
fileEntry.file(win, fail);
}
window.resolveLocalFileSystemURI(imageURI, onSuccess,
function(error) {
me.comp("PicPopOver").hide();
});
}
function onFail(message) {
me.comp("PicPopOver").hide();
setTimeout(function() {
window.plugins.toast.show("选择头像失败", "short", "center");
}, 1000);
}
navigator.camera.getPicture(onSuccess, onFail, {
quality : 50,
// destinationType : Camera.DestinationType.NATIVE_URI,
destinationType:navigator.camera.DestinationType.NATIVE_URI,
sourceType : sourceType,
// targetWidth:100,
// targetHeight:100,
allowEdit : true
});
评一波