Javascript 照片没有显示爱奥尼亚3号
我正在构建一个Ionic应用程序,并尝试使用相机本机插件拍照,然后将其显示在屏幕上。当我创建一个全新的项目并将其放入其中时,脚本正在工作,但它对我正在工作的项目不起作用 我原以为我的package.json有问题,但我更新了所有包,删除了文件和相机插件,重新安装了它们,但问题仍然是一样的, 这是我得到的输出 但是当我创建一个新项目并尝试脚本时,照片显示得非常完美 我只是被卡住了,不知道是什么导致了这场冲突,也不知道该去哪里寻找,请帮忙 HTML: 这是我远程调试应用程序时从控制台收到的错误: (索引):1拒绝加载图像的数据:image/jpeg;base64,/9j/4QBAAl+B//2Q=='因为它违反了以下内容安全策略指令:“default src*”。请注意,“img src”未显式设置,因此“default src”用作回退Javascript 照片没有显示爱奥尼亚3号,javascript,angular,typescript,ionic-framework,base64,Javascript,Angular,Typescript,Ionic Framework,Base64,我正在构建一个Ionic应用程序,并尝试使用相机本机插件拍照,然后将其显示在屏幕上。当我创建一个全新的项目并将其放入其中时,脚本正在工作,但它对我正在工作的项目不起作用 我原以为我的package.json有问题,但我更新了所有包,删除了文件和相机插件,重新安装了它们,但问题仍然是一样的, 这是我得到的输出 但是当我创建一个新项目并尝试脚本时,照片显示得非常完美 我只是被卡住了,不知道是什么导致了这场冲突,也不知道该去哪里寻找,请帮忙 HTML: 这是我远程调试应用程序时从控制台收到的错误:
我剪切了image base 64代码,因为它很长,阅读起来可能不太舒服,所以为什么在创建一个新项目时,它会毫无错误地显示出来,而在这个特定的项目中,它不起作用?好的,我想这是有人在找的 我在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;
" />
现在一切正常可能重复
import { Component } from '@angular/core';
import { NavController, ToastController } from 'ionic-angular';
import {Camera, CameraOptions} from "@ionic-native/camera";
import {File} from '@ionic-native/file';
export class HomePage {
public imageURI: any;
public imageName: any;
public fileCreated: boolean = false;
public imageString: any;
resultImageArray: any;
constructor(public navCtrl: NavController, private file: File, private
camera: Camera, private toastCtrl: ToastController,) {}
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: true
};
this.camera.getPicture(options).then((imageData) => {
this.imageURI = imageData;
this.imageName = imageData.substr(imageData.lastIndexOf('/') + 1);
this.file.checkDir(this.file.externalRootDirectory, 'ImagesDemo')
.then(() => {
this.fileCreated = true;
}, (err) => {
console.log("checkDir: Error");
console.log(JSON.stringify(err));
this.presentToast("checkDir Failed");
});
if (this.fileCreated) {
this.presentToast("Directory Already exist");
}
else {
this.file.createDir(this.file.externalRootDirectory,"ImagesDemo",true)
.then((res) => {
this.presentToast("Directory Created");
}, (err) => {
console.log("Directory Creation Error:");
console.log(JSON.stringify(err));
});
}
let tempPath = this.imageURI.substr(0,this.imageURI.lastIndexOf('/')+1);
let androidPath = this.file.externalRootDirectory + '/ImagesDemo/';
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");
console.log(JSON.stringify(err));
this.presentToast("Image Copy Failed");
});
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.resultImageArray = res;
}, (err) => {
this.presentToast("Image Get Error");
});
}
}
<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;
" />