在保存压缩图片之前，用户对象被优化了，我该如何更改

Question

我有个问题。我想压缩图像并将其存储到本地主机中。问题是image.onload是在对象创建之后执行的

var oneUser = {
id: user.user.id_profile,
username: user.user.username,
image: user_image,
};
users.push(oneUser);

我用关键字await尝试过，但不幸的是它不起作用。如何将压缩blob-url保存到本地存储具有blob-url的用户对象中。

const getChat = () => {
axios
.get(`http://localhost:4000/chat/rooms/${chatid}`, {})
.then((res) => {
if (res.status === 200) {

var users = [];
res.data.users.map((user) => {
// BASE64 zu Blob URL
var user_image = "";
image =  user.user.image.split(",");
image = image[1]
const contentType = 'image/png';
const b64Data = image;
const blob = b64toBlob(b64Data, contentType);
const blobUrl = URL.createObjectURL(blob);
console.log(blobUrl)
// Blob komporemieren
var image = new Image();
image.src = blobUrl;
image.onload = function() {
var  resized =  resizeMe(image); // resized image url
// BASE64 zu Blob Url
resized = resized.split(",");
resized = resized[1]
const contentType = 'image/png';
const b64Data = resized;
const blob = b64toBlob(b64Data, contentType);
user_image = URL.createObjectURL(blob);
console.log(user_image)
}


console.log(user_image)
var oneUser = {
id: user.user.id_profile,
username: user.user.username,
image: user_image,
};
users.push(oneUser);
});
//console.log(users)
localStorage.removeItem(`userList_${chatid}`);
localStorage.setItem(`userList_${chatid}`,JSON.stringify(users));

console.log("HALLO")


setInitalMessages(res.data);
scrollToBottom();
}
})
.catch((error) => {
console.log(error);
});
};

// === RESIZE ====
const resizeMe = (img) =>  {

var canvas = document.createElement('canvas');
var max_width = 50
var max_height = 50
var width = img.width;
var height = img.height;
console.log(width)
console.log(height)
// calculate the width and height, constraining the proportions
if (width > height) {
if (width > max_width) {
//height *= max_width / width;
height = Math.round(height *= max_width / width);
width = max_width;

}
} else {
if (height > max_height) {
//width *= max_height / height;
width = Math.round(width *= max_height / height);
height = max_height;

}
}

// resize the canvas and draw the image data into it
canvas.width = width;
canvas.height = height;
var ctx = canvas.getContext("2d");
ctx.drawImage(img, 0, 0, width, height);

return canvas.toDataURL("image/jpeg",0.7); // get the data from canvas as 70% JPG (can be also PNG, etc.)

// you can get BLOB too by using canvas.toBlob(blob => {});
}

const b64toBlob = (b64Data, contentType='', sliceSize=512) => {
const byteCharacters = atob(b64Data);
const byteArrays = [];

for (let offset = 0; offset < byteCharacters.length; offset += sliceSize) {
const slice = byteCharacters.slice(offset, offset + sliceSize);

const byteNumbers = new Array(slice.length);
for (let i = 0; i < slice.length; i++) {
byteNumbers[i] = slice.charCodeAt(i);
}

const byteArray = new Uint8Array(byteNumbers);
byteArrays.push(byteArray);
}

const blob = new Blob(byteArrays, {type: contentType});
return blob;
}

Answer 1

如果代码的其余部分工作正常，那么我认为您唯一需要更改的就是放置"oneUser"；在"；image.onload"；回调，因为异步操作就是在这里进行的。

// ...
image.onload = function() {
var  resized =  resizeMe(image); // resized image url
// BASE64 zu Blob Url
resized = resized.split(",");
resized = resized[1]
const contentType = 'image/png';
const b64Data = resized;
const blob = b64toBlob(b64Data, contentType);
user_image = URL.createObjectURL(blob);
console.log(user_image)
// INITIALIZE THE USER HERE
var oneUser = {
id: user.user.id_profile,
username: user.user.username,
image: user_image,
};
users.push(oneUser);

// SAVE THE USERS
localStorage.removeItem(`userList_${chatid}`);
localStorage.setItem(`userList_${chatid}`,JSON.stringify(users));
}

// ...      

由于事件不是基于Promise的，所以不能使用异步等待语法等待这样的操作(除非为其创建Promise包装器，但我认为这是不必要的(。