如何在使用javascript裁剪上传的图像后获得大小

我有以下输入元素：

在id为

ImageUploader

的

div

中。 上传的图像会被自动裁剪，但我对该功能没有影响

JS:

奇怪的是，对于某些图像，它可以将裁剪后的大小记录到控制台，但是对于其他图像，

event.target.files[0]。initialcropedreapixels

只返回未定义的，我不理解，因为在下一行，登录到控制台的文件始终具有

initialcropedareapixels

属性。

---

有什么问题吗？

我将重点讨论这一部分（因为我们对代码的其余部分了解很少）：

event.target.files[0]。initialCroppedAreaPixels

只返回

undefined

，我不理解这一点，因为在下一行中，登录到控制台的文件始终具有

initialCroppedAreaPixels

属性

在js控制台中，第一个

console.log

返回特定时间的属性值。第二个返回一个对象（对象本身，而不是它在特定时间的值）

要说服您，请打开js控制台并进行以下实验：

let myObject = {};
console.log(myOject);
myObject.foo = 'bar';

如果单击由

console.log

记录的消息，您可以看到

myObject

的

foo

属性，尽管它在console.log中不存在

发件人：

请注意，如果您在最新版本的Chrome和Firefox中记录对象，那么您在控制台上记录的是对对象的引用，而不一定是您调用console.log（）时对象的“值”

---

因此，您的问题是

img.onload

事件不是检查

initialcropedAreaPixels

属性的正确时间。此事件可能在定义属性之前或之后发生

---

什么是检查的正确时间？我不能告诉你。可能是裁剪图像的程序的一部分，在图像准备就绪时提供回调？祝您好运。

console.log

输出会立即显示根级别的对象，但在使用切换箭头展开对象之前，您不会看到相关的属性列表。。这些属性可能是在事实之后添加的（即使是以毫秒为单位）

应用于现有

事件.target

对象的

initialCroppedAreaPixels

属性可能就是这种情况

要测试您的情况是否如此，您可以尝试

console.log（Object.keys（event.target.files[0]）

或

console.log（JSON.stringify（event.target.files[0]）

，它将显示调用

log

时可用的实际键

一些人报告说这是一种解决方案：

let croppedImage =JSON.parse(JSON.stringify(event.target.files[0]));
console.log(croppedImage.initialCroppedAreaPixels);

一个小的定时器延迟可能会有所帮助

setTimeout( () => {
   console.log(event.target.files[0].initialCroppedAreaPixels);
}, 100)

---

只是一种预感：可能只有在图像实际被裁剪时才提供，而不是在默认情况下它足够小时才提供。我不认为这是问题所在，因为裁剪要达到一定的纵横比，所以几乎所有图像都应该被裁剪。这回答了你的问题吗？不幸的是，它没有，因为问题不涉及裁剪。您的问题是如何获得图像大小。您的描述听起来像是想要得到裁剪尺寸。也许换个名字？谢谢你，耽搁确实解决了这个问题！

setTimeout( () => {
   console.log(event.target.files[0].initialCroppedAreaPixels);
}, 100)