Javascript 用户对象在压缩图片保存之前被删除，如何更改？

我有个问题。我想压缩am图像并将其存储到本地主机中。问题是

image.onload

是在创建对象后执行的

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

我用关键字

wait

尝试了一下，但不幸的是，它不起作用。如何将压缩blob url保存到localstorage具有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;
  }

const getChat=（）=>{
axios
.得到(`http://localhost:4000/chat/rooms/${chatid}`，{}）
。然后（（res）=>{
如果（资源状态===200）{
var用户=[]；
res.data.users.map（（用户）=>{
//BASE64 zu Blob URL
var user_image=“”；
image=user.user.image.split（“，”）；
图像=图像[1]
const contentType='image/png'；
const b64Data=图像；
const blob=b64toBlob（b64Data，contentType）；
const blobUrl=URL.createObjectURL（blob）；
console.log（blobUrl）
//圆球
var image=新图像（）；
image.src=blobUrl；
image.onload=函数（）{
var resized=resizeMe（image）；//调整大小的图像url
//BASE64 zu Blob Url
调整大小=调整大小。拆分（“，”）；
调整大小=调整大小[1]
const contentType='image/png'；
const b64Data=已调整大小；
const blob=b64toBlob（b64Data，contentType）；
user_image=URL.createObjectURL（blob）；
console.log（用户图片）
}
console.log（用户图片）
var oneUser={
id:user.user.id\u配置文件，
用户名：user.user.username，
图像：用户图像，
};
push（一个用户）；
});
//console.log（用户）
removietem（`userList\${chatid}`）；
setItem（`userList\${chatid}`，JSON.stringify（users））；
控制台日志（“你好”）
setInitalMessages（res.data）；
scrollToBottom（）；
}
})
.catch（（错误）=>{
console.log（错误）；
});
};
//==调整大小====
常数resizeMe=（img）=>{
var canvas=document.createElement（'canvas'）；
var最大宽度=50
var最大高度=50
变量宽度=img.width；
var高度=img高度；
控制台日志（宽度）
控制台日志（高度）
//计算宽度和高度，约束比例
如果（宽度>高度）{
如果（宽度>最大宽度）{
//高度*=最大宽度/宽度；
高度=数学圆（高度*=最大宽度/宽度）；
宽度=最大宽度；
}
}否则{
如果（高度>最大高度）{
//宽度*=最大高度/高度；
宽度=数学圆（宽度*=最大高度/高度）；
高度=最大高度；
}
}
//调整画布大小并将图像数据绘制到其中
画布宽度=宽度；
canvas.height=高度；
var ctx=canvas.getContext（“2d”）；
ctx.drawImage（img，0，0，宽度，高度）；
返回canvas.toDataURL（“image/jpeg”，0.7）；//从canvas获取70%JPG的数据（也可以是PNG，等等）
//您也可以使用canvas.toBlob（BLOB=>{}）获得BLOB；
}
const b64toBlob=（b64Data，contentType=''，sliceSize=512）=>{
常量ByTechCharacters=atob（B64数据）；
常量字节数组=[]；
for（让offset=0；offset

如果代码的其余部分工作正常，那么我想说，您唯一需要更改的是将“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));
}
  
// ...      

---

由于事件不是基于承诺的，因此不能使用async await语法等待此类操作（除非您为其创建承诺包装，但我认为这是不必要的）。

感谢您的评论。我也试过了。问题是代码片段

localStorage.setItem（'userList_${chatid}'，JSON.stringify（users））

如果我将

用户

粘贴到

图像中。onload

回调

localStorage

将保存一个空对象：/好的，我没有看到它被用在那里，在这种情况下，你也可以把这个命令放在回调里面！如果另一个命令也要求首先保存用户，则可以将所有用户都放在其中。这就是引入async await以避免“回调地狱”的原因。我正在相应地更新我的答案：）