这是我的 HTML 代码
<img [src]="profileImage"/>
<button (click)="openCamera()"> Upload </button>
下面是我的组件代码
import { ViewController, Platform, normalizeURL } from 'ionic-angular';
openCamera() {
let options = {
quality: 100,
destinationType: this.camera.DestinationType.FILE_URI,
encodingType: this.camera.EncodingType.JPEG,
mediaType: this.camera.MediaType.PICTURE,
saveToPhotoAlbum: false,
targetWidth: 400,
targetHeight: 400,
allowEdit: false
}
this.camera.getPicture(options).then((imageData) => {
this.cropService.crop(imageData, { quality: 100 }).then((newImage) => {
this.profileImage = normalizeURL(newImage);
}, (error) => {
console.log("Error cropping image", error);
});
}, (err) => {
console.log('Error camera image', err);
});
}
- 当我从相机捕获图像时,它将返回FILE_URI,就像这个file:///storage/emulated/0/Android/data/com.exchangeconnect.sancial/cache/1536751062113-cropped。 jpg?1536751088363,
- 但图像未显示在
<img>
中标签
最佳答案
我修改了你的代码。请在下面找到更新的代码:
import { ViewController, Platform, normalizeURL } from 'ionic-angular';
openCamera() {
let options = {
quality: 100,
destinationType: this.camera.DestinationType.FILE_URI,
encodingType: this.camera.EncodingType.JPEG,
mediaType: this.camera.MediaType.PICTURE,
saveToPhotoAlbum: false,
targetWidth: 400,
targetHeight: 400,
allowEdit: false
}
this.camera.getPicture(options).then((imageData) => {
this.cropService.crop(imageData, { quality: 100 }).then((newImage) => {
if (this.platform.is('ios')){
this.profileImage = normalizeURL(newImage);
}else{
this.profileImage= "data:image/jpeg;base64," + newImage;
}
}, (error) => {
console.log("Error cropping image", error);
});
}, (err) => {
console.log('Error camera image', err);
});
}
或者
如果上述解决方案不起作用,请尝试以下代码:
import { ViewController, Platform, normalizeURL } from 'ionic-angular';
openCamera() {
let options = {
quality: 100,
destinationType: this.camera.DestinationType.FILE_URI,
encodingType: this.camera.EncodingType.JPEG,
mediaType: this.camera.MediaType.PICTURE,
saveToPhotoAlbum: false,
targetWidth: 400,
targetHeight: 400,
allowEdit: false
}
this.camera.getPicture(options).then((imageData) => {
// don't need to crop image for iOS platform as it is a in-build feature
if (this.platform.is('ios')) {
this.getFileUri(imageData);
}else { // android platform, we need to do manually
this.cropService.crop(imageData, { quality: 100 }).then(newImage => {
this.getFileUri(newImage);
},
error => console.error('Error cropping image', error)
);
}
}, (err) => {
console.log('Error camera image', err);
});
}
private getFileUri = (url: any) => {
var scope = this;
var xhr = new XMLHttpRequest();
xhr.onload = function() {
var reader = new FileReader();
reader.onloadend = function() {
scope.profileImage = reader.result;
}
reader.readAsDataURL(xhr.response);
};
xhr.open('GET', url);
xhr.responseType = 'blob';
xhr.send();
}
我认为它与“cordova-plugin-ionic-webview”插件有关。请引用以下步骤来解决该问题:
1]卸载现有的webview插件
ionic cordova plugin rm cordova-plugin-ionic-webview
2]安装旧版本
ionic cordova plugin add <a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="7e1d110c1a11081f530e120b19171053171110171d53091b1c08171b093e4f504c504f" rel="noreferrer noopener nofollow">[email protected]</a>
3]干净的 Cordova 安卓
ionic cordova clean android
请在此处查找更多详细信息 https://github.com/ionic-team/cordova-plugin-ionic-webview/issues/158
关于javascript - Ionic 3 未在图像 src 中显示相机 FILE_URI 路径,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52419904/