JavaScript中的同步图像加载

Synchronous image loading in JavaScript

本文关键字:图像 加载 同步 JavaScript      更新时间:2023-09-26

我正在写一个JavaScript函数:

function imgstr(url) {
    var img = new Image();
    img.src = url;
    var canvas = document.createElement("canvas");
    canvas.width = img.width;
    canvas.height = img.height;
    var ctx = canvas.getContext("2d");
    ctx.drawImage(img, 0, 0);
    return canvas.toDataURL('image/png');
}

目标是从给定的图像URL输出一个base64字符串。

虽然上面的代码不起作用,原因是img src被URL分配后,它异步加载图像内容。如何使这个过程同步?

使用下面的方法等待图像加载

    currentimage.onload = function(e){
    // code, runned after image load
}