angular - 角度 6 中的图像尺寸验证
问题描述
如何验证上传图片的尺寸。上传图片的大小应为 100 x 100。
上传.ts
onFileChange(event) {
let reader = new FileReader();
if (event.target.files && event.target.files.length > 0) {
let file = event.target.files[0];
reader.readAsDataURL(file);
reader.onload = () => {
this.imagePreview = reader.result;
this.employee.photo = reader.result.split(",")[1];
};
}
}
上传.html
<div class="row">
<div class="col-md-5">
<input type="file" id="avatar"
(change)="onFileChange($event)" #fileInput name="photo">
<p style="color: red">photo should be 100 x 100 size</p>
</div>
</div>
解决方案
这个答案工作正常 ,但有时它返回 0 高度和宽度,这是因为图像没有被加载。我通过简单地使用 setTimeout- 来解决这个问题
let reader = new FileReader();
if (event.target.files && event.target.files.length > 0) {
let file = event.target.files[0];
let img = new Image();
img.src = window.URL.createObjectURL( file );
reader.readAsDataURL(file);
reader.onload = () => {
setTimeout(() => {
const width = img.naturalWidth;
const height = img.naturalHeight;
window.URL.revokeObjectURL( img.src );
console.log(width + '*' + height);
if ( width !== 64 && height !== 64 ) {
alert('photo should be 64 x 64 size');
form.reset();
} else {
this.imgURL = reader.result;
}
}, 2000);
};
推荐阅读
- express - 在 next.js 编译时,中间件被命中太多次
- java - 仅当流不是空后缀时,自定义收集器才在分隔符、后缀和前缀上加入流
- javascript - 我们如何在 jquery 中对“This”事件应用条件?
- angular - 如何处理中的键盘事件
我用 div 创建了一个虚拟滚动列表。使用事件绑定,我可以附加动作来单击 dblclick 事件。我想绑定一个像 KeyPress 这样的键盘事件来检测回车键并模仿鼠标点击的动作。无论我尝试什么,事件都不会触发。我究竟做错了什么?
<cdk-virtual-sc
- arduino - How to control an led from Thingspeak server using SIM900A and Arduino?
- php - PHP中的多个进程正在使用相同的变量值?
- r - 对于每组,每周,在 R 中找到前 X 周的观察值总和
- ignite - Apache Ignite 节点的最大内存大小是多少?
- delphi - 如何在 Delphi 调试期间查看通用 tList
- python - importError pdfkit 与 docker 要求 wkhtmltopdf