等待在Javascript中加载图像

Wait while image is loaded in Javascript

本文关键字：加载 图像 Javascript 等待      更新时间：2023-09-26

我有以下问题:

function getBase64Image() {
    var svg = //some svg string;
    var canvas = document.createElement('canvas');
    var mimetype = 'image/png';
    canvas.width = 600;
    canvas.height = 600;
    var timg = new Image(),
    ctx = canvas.getContext('2d');
    timg.width = 600;
    timg.height = 600;
    timg.onload = function () {
       document.body.appendChild(canvas);
            try {
                ctx.clearRect(0, 0, 600, 600);
                ctx.drawImage(timg, 0, 0);
            }
            catch (e) {
                return false;
            }
       var strData = canvas.toDataURL(mimetype);
       document.body.removeChild(canvas);
       img_data = strData;
        }
        timg.src = 'data:image/svg+xml;base64,' + svg;
    }
    return img_data;
}

基本上，我想将svg转换为png。我有svg字符串，然后我加载图像并用画布绘制它。然后我为png图像获取base64字符串。我遇到的问题是，函数getBase64Image在图像加载之前退出。我该如何预防呢?

也许使用延迟或重写函数?我谷歌了一下，但找不到相近的答案。

谢谢。

不能在同步函数中修改异步函数。

最简单的解决方案是传递一个回调:

function fetchBase64Image(callback) {
    var svg = //some svg string;
    var canvas = document.createElement('canvas');
    var mimetype = 'image/png';
    canvas.width = 600;
    canvas.height = 600;
    var timg = new Image(),
    ctx = canvas.getContext('2d');
    timg.width = 600;
    timg.height = 600;
    timg.onload = function () {
       document.body.appendChild(canvas);
            try {
                ctx.clearRect(0, 0, 600, 600);
                ctx.drawImage(timg, 0, 0);
            }
            catch (e) {
                return false;
            }
       var strData = canvas.toDataURL(mimetype);
       document.body.removeChild(canvas);
       img_data = strData;
       callback(img_data);
      }
      timg.src = 'data:image/svg+xml;base64,' + svg;
    }
}

你可以这样使用:

fetchBase64Image(function(img_data){
   // use the image img_data
}):
相关文章：