使用 ng2-file-upload 获取图像的宽度和高度
Get width and height of image with ng2-file-upload
我想使用 ng2-file-upload 和 Angular 6.
获取并检查上传图片的宽度和高度
到目前为止我的代码是:
constructor() {
this.uploader = this.initializeUploader("url");
}
public uploader;
private initializeUploader(url: string): FileUploader {
const uploadOptions: FileUploaderOptions = {
allowedMimeType: ['image/jpeg', 'image/png' ],
}
const uploader = new FileUploader(uploadOptions);
uploader.onAfterAddingFile = item => {
console.log(item);
//Want to get width here
}
return uploader;
}
和 HTML:
<input type="file" ng2FileSelect [uploader]="uploader" />
我一直在寻找解决方案,但没有任何效果。找到使用的想法
Upload.imageDimensions(file).then()
here。但是我不明白 how/where 导入 'Upload'。还找到了添加
的解决方案
ngf-min-height="1"
在输入元素中,但如果输入图像的大小错误,我找不到哪里可以 "catch" 错误。
将您的文件转换为 base64,并以此为源创建图像。 load
hook期间,可以获取到图片的大小。这是一个工作片段!
function change() {
const input = document.querySelector('input');
const file = input.files[0];
getBase64(file).then(base64 => {
const img = new Image();
img.onload = () => console.log(img.width, img.height);
img.src = base64;
});
}
function getBase64(file) {
return new Promise((resolve, reject) => {
const reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = () => resolve(reader.result);
reader.onerror = error => reject(error);
});
}
<input type="file" onchange="change()">
最后,我对 trichetriche 的 post 进行了一些更改:
public change() {
const input = document.querySelector('input');
const file = input.files[0];
this.getBase64(file).then(base64 => {
const img = new Image();
img.onload = () => console.log(img.width, img.height);
img.src = base64.toString();
});
}
public getBase64(file) {
return new Promise((resolve, reject) => {
const reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = () => resolve(reader.result);
reader.onerror = error => reject(error);
});
}
和html:
<input type="file" (change)="change()">
我想使用 ng2-file-upload 和 Angular 6.
获取并检查上传图片的宽度和高度到目前为止我的代码是:
constructor() {
this.uploader = this.initializeUploader("url");
}
public uploader;
private initializeUploader(url: string): FileUploader {
const uploadOptions: FileUploaderOptions = {
allowedMimeType: ['image/jpeg', 'image/png' ],
}
const uploader = new FileUploader(uploadOptions);
uploader.onAfterAddingFile = item => {
console.log(item);
//Want to get width here
}
return uploader;
}
和 HTML:
<input type="file" ng2FileSelect [uploader]="uploader" />
我一直在寻找解决方案,但没有任何效果。找到使用的想法
Upload.imageDimensions(file).then()
here。但是我不明白 how/where 导入 'Upload'。还找到了添加
的解决方案ngf-min-height="1"
在输入元素中,但如果输入图像的大小错误,我找不到哪里可以 "catch" 错误。
将您的文件转换为 base64,并以此为源创建图像。 load
hook期间,可以获取到图片的大小。这是一个工作片段!
function change() {
const input = document.querySelector('input');
const file = input.files[0];
getBase64(file).then(base64 => {
const img = new Image();
img.onload = () => console.log(img.width, img.height);
img.src = base64;
});
}
function getBase64(file) {
return new Promise((resolve, reject) => {
const reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = () => resolve(reader.result);
reader.onerror = error => reject(error);
});
}
<input type="file" onchange="change()">
最后,我对 trichetriche 的 post 进行了一些更改:
public change() {
const input = document.querySelector('input');
const file = input.files[0];
this.getBase64(file).then(base64 => {
const img = new Image();
img.onload = () => console.log(img.width, img.height);
img.src = base64.toString();
});
}
public getBase64(file) {
return new Promise((resolve, reject) => {
const reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = () => resolve(reader.result);
reader.onerror = error => reject(error);
});
}
和html:
<input type="file" (change)="change()">