Question

我有以下问题。

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在加载图像之前退出。我该如何预防？

也许使用延迟或重写功能？我用Google搜索，但无法找到答案。

谢谢。

Answer 1

您无法在同步功能中更改异步功能。

最简单的解决方案是传递回调：

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
}):

等待在Javascript中加载图像

1 个答案: