如何在使用 javascript 裁剪上傳的圖像后獲取大小

Question

我有以下輸入元素： <input type="file" accept="image/*" multiple="">在 ID 為ImageUploader的div內。 上傳的圖像會自動裁剪，但我對該功能沒有影響。

JS：

var upload = document.getElementById("ImageUploader");
upload.onchange=function(event){
    let img = new Image()
    //console.log(event);
    img.src = window.URL.createObjectURL(event.target.files[0]);
    
    img.onload = () => {
        
        console.log(event.target.files[0].initialCroppedAreaPixels);
        console.log(event.target.files[0]);
        };
};

奇怪的是，對於某些圖像，它能夠將裁剪后的大小記錄到控制台，但對於其他圖像event.target.files[0].initialCroppedAreaPixels只返回 undefined，我不明白，因為在下一行，登錄到控制台的文件始終具有initialCroppedAreaPixels屬性。 那里有什么問題？

Answer 1

我將重點介紹這部分（因為我們對代碼的rest知之甚少）：

event.target.files[0].initialCroppedAreaPixels只返回undefined ，我不明白，因為在下一行中，登錄到控制台的文件始終具有initialCroppedAreaPixels屬性。

在您的 js 控制台中，第一個console.log在特定時間返回屬性的值。 第二個返回 object（object 本身，而不是它在特定時間的值）。

為了說服你，打開一個 js 控制台並做以下實驗：

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

如果您單擊由console.log記錄的消息，您可以看到myObject的foo屬性，盡管它在 console.log 時刻不存在。

來自MDN Web 文檔 - console.log ：

請注意，如果您在最新版本的 Chrome 和 Firefox 中記錄對象，您在控制台上記錄的內容是對 object 的引用，這不一定是您在控制台中調用的 ZA8CFDE6331BD59EB2AC96F8911C4B66 的“值”。日志（）

---

所以你的問題是img.onload事件不是檢查initialCroppedAreaPixels屬性的正確時間。 此事件可能在定義屬性之前或之后發生。

檢查的正確時間是什么時候？ 我不能告訴你。 可能是裁剪圖像的程序部分在圖像准備好時提供回調？ 祝你好運。

Answer 2

console.log output 立即顯示根級別對象，但在使用切換箭頭展開 object 之前，您看不到相關的屬性列表。這些屬性可能是在事后添加的（即使是毫秒）

應用於現有event.target object 的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)