原因:在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 });
评一波