我正在使用ionic 3 android build apk并尝试从 file:///storage/emulated/0/data/io.ionic.vdeovalet/cache/image.jpeg 加载图像>
takePicture(sourceType) { try { // Create options for the Camera Dialog var options = { quality: 100, destinationType: this.camera.DestinationType.FILE_URI, encodingType: this.camera.EncodingType.JPEG, sourceType: sourceType, }; this.camera.getPicture(options).then((imagePath) => { // Special handling for Android library if (this.platform.is('android') && sourceType === this.camera.PictureSourceType.PHOTOLIBRARY) { this.filePath.resolveNativePath(imagePath) .then(filePath => { let correctPath = filePath.substr(0, filePath.lastIndexOf('/') + 1); let currentName = imagePath.substring(imagePath.lastIndexOf('/') + 1, imagePath.lastIndexOf('?')); this.copyFileToLocalDir(correctPath, currentName, this.createFileName()); this.lastImage = filePath; }); } else { var currentName = imagePath.substr(imagePath.lastIndexOf('/') + 1); var correctPath = imagePath.substr(0, imagePath.lastIndexOf('/') + 1); this.copyFileToLocalDir(correctPath, currentName, this.createFileName()); } }, (err) => { this.presentToast('Error while selecting image.'); }); } catch (e) { console.error(e); } }
错误:不允许加载本地资源
android 6.0.1
答案 0 :(得分:14)
我遇到了同样的问题,事实证明 导致问题的原因是新的ionic webview插件。
新插件:cordova-plugin-ionic-webview @ 2.x似乎不稳定...
要使其工作降级到cordova-plugin-ionic-webview@1.2.1,所有都应该工作
步骤:
1。。卸载Webview
ionic cordova plugins rm cordova-plugin-ionic-webview
2。。安装旧版本:
ionic cordova plugins add cordova-plugin-ionic-webview@1.2.1
3。干净的科尔多瓦
cordova clean android
答案 1 :(得分:2)
将Ionic与电容器配合使用时,我们可以通过以下方式获取本机设备上图像或其他资源的正确路径:
var hasCycle = function(data) {
let dataLength = data.length;
let table = {};
for(let i=0 ; i < dataLength; i++ ) {
if(table[data[i]]) {
return i;
}
table[data[i]] = true;
}
return -1;
};
console.log(hasCycle([1,2,1]));// 2
console.log(hasCycle([1,2])); // -1
答案 2 :(得分:1)
尝试一下:
1)https://devdactic.com/ionic-2-images/ 在本教程中,ionic 2和ionic 3是上传和上传图像的最佳方法。
2)https://devdactic.com/ionic-4-image-upload-storage/在本教程中,ionic 4是上传和上传图像的最佳方法。
我也使用这些...并且工作正常...
我也遇到了问题
不允许加载本地资源
答案 3 :(得分:0)
尝试一下:
const options: CameraOptions = {
quality: 10
, destinationType: this.camera.DestinationType.DATA_URL
, mediaType: this.camera.MediaType.PICTURE
// Optional , correctOrientation: true
, sourceType: sourceType == 0 ? this.camera.PictureSourceType.CAMERA : this.camera.PictureSourceType.PHOTOLIBRARY
// Optional , saveToPhotoAlbum: true
};
this.camera.getPicture(options).then(imageBase64 => {
let txtForImage = `data:image/jpeg;base64,` + imageBase64;
this.imageToLoad = txtForImage;
})
.catch(error => {
alert("Error: " + error);
console.error(error);
});
答案 4 :(得分:0)
将此行复制到您的index.html
<meta http-equiv="Content-Security-Policy" content="default-src *;
style-src 'self' 'unsafe-inline';
script-src 'self' 'unsafe-inline' 'unsafe-eval';
img-src 'self' data: https://s-media-cache-ak0.pinimg.com;
script-src 'self' https://maps.googleapis.com;" />
然后,编写此函数而不是您的函数,请注意,此脚本所做的是将照片返回为base64
getImageFromCamera() {
const options: CameraOptions = {
quality: 20,
saveToPhotoAlbum: true,
destinationType: this.camera.DestinationType.FILE_URI,
sourceType: this.camera.PictureSourceType.CAMERA,
encodingType: this.camera.EncodingType.JPEG,
allowEdit: false
};
this.camera.getPicture(options).then((imageData) => {
this.imageURI = imageData;
this.imageName = imageData.substr(imageData.lastIndexOf('/') + 1);
// Create a folder in memory location
this.file.checkDir(this.file.externalRootDirectory, 'Demo')
.then(() => {
this.fileCreated = true;
}, (err) => {
console.log("checkDir: Error");
this.presentToast("checkDir Failed");
});
if (this.fileCreated) {
this.presentToast("Directory Already exist");
}
else {
this.file.createDir(this.file.externalRootDirectory, "Demo", true)
.then((res) => {
this.presentToast("Directory Created");
}, (err) => {
console.log("Directory Creation Error:");
});
}
//FILE MOVE CODE
let tempPath = this.imageURI.substr(0, this.imageURI.lastIndexOf('/') + 1);
let androidPath = this.file.externalRootDirectory + '/Bexel/';
this.imageString = androidPath + this.imageName;
this.file.moveFile(tempPath, this.imageName, androidPath, this.imageName)
.then((res) => {
this.presentToast("Image Saved Successfully");
this.readImage(this.imageString);
}, (err) => {
console.log("Image Copy Failed");
this.presentToast("Image Copy Failed");
});
//Complete File Move Code
this.toDataURL(this.imageURI, function (dataUrl) {
console.log('RESULT:' + dataUrl);
});
}, (err) => {
console.log(JSON.stringify(err));
this.presentToast(JSON.stringify(err));
});
}
presentToast(msg) {
let toast = this.toastCtrl.create({
message: msg,
duration: 2000
});
toast.present();
}
toDataURL(url, callback) {
let xhr = new XMLHttpRequest();
xhr.onload = function () {
let reader = new FileReader();
reader.onloadend = function () {
callback(reader.result);
};
reader.readAsDataURL(xhr.response);
};
xhr.open('GET', url);
xhr.responseType = 'blob';
xhr.send();
}
readImage(filePath) {
let tempPath = filePath.substr(0, filePath.lastIndexOf('/') + 1);
let imageName = filePath.substr(filePath.lastIndexOf('/') + 1);
this.file.readAsDataURL(tempPath, imageName)
.then((res) => {
this.presentToast("Image Get Done");
this.imageUrl = res;
}, (err) => {
this.presentToast("Image Get Error");
});
}
似乎是内容CSP(内容安全策略)存在问题,meta标签应解决此问题,然后代码会将照片读取为base64,然后以HTML格式进行查找:
<img [src]="imageUrl">
您可以修改该功能以删除不必要的console.log,我只是在测试。
答案 5 :(得分:0)
无需降级,只需编写以下代码即可。
private win: any = window;
this.win.Ionic.WebView.convertFileSrc(path);
答案 6 :(得分:0)
我所要做的就是使用适当的Imagepicker选项,输出类型做到了:
const options: ImagePickerOptions = {
maximumImagesCount: 1,
outputType: 1,
quality: 50
};
答案 7 :(得分:0)
对我唯一有用的是input.files
convertFileSrc()
希望这会有所帮助
答案 8 :(得分:0)
let win: any = window; // hack ionic/angular compilator
var myURL = win.Ionic.WebView.convertFileSrc(myURL);