Javascript:调整base64图像的大小并以非异步方式返回字符串

Javascript: resize base64 image and return string in non-async way

本文关键字：异步 方式 字符串 返回 调整 base64 图像 Javascript      更新时间：2023-09-26

我用谷歌搜索了足够多的例子，找到了如何调整图像大小的解决方案：

function imageToDataUri(img, width, height) {
    // create an off-screen canvas
    var canvas = document.createElement('canvas'),ctx = canvas.getContext('2d');
    // set its dimension to target size
    canvas.width = width;
    canvas.height = height;
    // draw source image into the off-screen canvas:
    ctx.drawImage(img, 0, 0, width, height);
    // encode image to data-uri with base64 version of compressed image
    return canvas.toDataURL();
}
function resizeImage() {
    var newDataUri = imageToDataUri(this, 10, 10); // resize to 10x10
    return newDataUri;
}

这是我的问题：

我有对象列表，其中每个项目都有 64 个图像字符串：group.mAvatarImgBase64Str . 该字符串大于 10x10，我需要将其替换为新字符串。

到目前为止，我做到了：

  if (group.mAvatarImgBase64Str !== 'none') {
            var img = new Image();
            img.onload = resizeImage;
            img.src = group.mAvatarImgBase64Str;
            // group.mAvatarImgBase64Str = ?? 
  }

如果我resizeImage方法中打印出新值 - 它正确调整了大小，但是：

如何将新字符串添加回group.mAvatarImgBase64Str？

onload任务是异步的，我需要类似的东西：

 group.mAvatarImgBase64Str = resize(group.mAvatarImgBase64Str, 10, 10);

谢谢

你应该能够这样做：

if (group.mAvatarImgBase64Str !== 'none') {
    (function(group) {
        var img = new Image();
        img.onload = function() {
            group.mAvatarImgBase64Str = resizeImage.call(this);
        }
        img.src = group.mAvatarImgBase64Str;
    })(group);
}

如果您使用 for 循环迭代对象数组，则需要额外的 IIFE。如果使用forEach循环，则不需要它。

相关文章：