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

Question

我搜索了足够多的示例并找到了如何调整图像大小的解决方案:

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);

谢谢，

Answer 1

你应该可以这样做:

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 循环，则不需要。