我想检查上传图像的宽度和高度。因此,我使用JS来获取那些,但是它返回0。有时它可以工作,但通常不起作用。我不知道原因,所以请让我知道发生这种情况的原因。
<label class="add-label" title="イメージ追加" v-if="!uploadedImage">
<i class="material-icons add-rich-image" v-if="!uploadedImage">add</i>
<input type="file" @change="onFileChange" class="imageBtn" ref="richImage" accept="img/*">
</label>
<div class="richmenu-img-area">
<img class="richmenu-img" :src="uploadedImage" ref="uploaded" ondragstart="return false">
</div>
onFileChange(e){
let files = e.target.files || e.dataTransfer.files;
if(!files[0].type.match(/image.*/)){
alert("イメージファイルをアップロードしてください。")
return;
}
this.imageFile = files[0]
this.createImage(files[0]);
},
createImage(file){
let reader = new FileReader();
let image = new Image();
reader.onload = (e) => {
image.src = e.target.result;
console.log(image.width)//********************* sometimes ok but sometimes 0
console.log(image.height)//********************* sometimes ok but sometimes 0
this.uploadedImage = e.target.result;
}
reader.readAsDataURL(file);
},
要重现您的问题,请使用下面的代码片段,然后执行以下步骤:
const input = document.getElementById('input');
input.addEventListener('change', createImage);
function createImage(e){
const files = e.target.files || e.dataTransfer.files;
const reader = new FileReader();
const image = new Image();
reader.addEventListener('load', function(e){
image.src = e.target.result;
console.log(image.width, image.height);
});
reader.readAsDataURL(files[0]);
}
<input id="input" type="file" accept="image/*">
您应该看到返回的前2个上传,返回0 0
的第三个上传正确的图像宽度和高度。
这是因为在元数据(即宽度和高度)可用之前,需要完全加载图像。
再次上传相同文件会产生正确结果的原因是,图像是从以前加载的,并由浏览器保存在缓存中。因此,下次您尝试加载它时,浏览器已经具有该信息以传递给您的代码。
如果您需要获取,.width
并且.height
每次上传文件时,都应侦听图像元素的加载时间:
const input = document.getElementById('input');
input.addEventListener('change', createImage);
function createImage(e){
const files = e.target.files || e.dataTransfer.files;
const reader = new FileReader();
const image = new Image();
// Get the image data only after it is loaded.
image.addEventListener('load', function(e){
console.log(image.width, image.height);
});
reader.addEventListener('load', function(e){
image.src = e.target.result;
});
reader.readAsDataURL(files[0]);
}
<input id="input" type="file" accept="image/*">
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句