获得空白图像与画布绘制大约一半的时间

Question

我正在将base64字符串转换为图像，然后将其传递给画布绘制以使其更小。这是基于一个脚本，我发现在SO.

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

我传入图像元素(这是正确的，之前我检查过)，有时这个脚本工作正确，并将图像更改为正确的大小，其他时候它生成我认为是一个空白图像，像这样:

iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAAAXNSR0IArs4c6QAAAEJJREFUaAXt0IEAAAAAw6D5Ux/khVBhwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYeBwYnQgABzCacsQAAAABJRU5ErkJggg==

我找不到任何可再现性——在相同或不同的图像上发生或不发生。

发生了什么事?脚本似乎工作，但只有一半的时间?

编辑-这是如何为上述函数的图像生成:

                function resizeURI(base64) {
                var img = new Image;
// turns base64 into dataURI
var uri = base64ToDataUri(base64);
img.src = uri;
var resizedURI = resizeImage(img);
// turns dataURI into base64 again
resizedURI = resizedURI.substring(resizedURI.indexOf(",") + 1);
return resizedURI;
                }
function resizeImage(img) {
    var newDataUri = imageToDataUri(img, 50, 50);
    return newDataUri;
}

Answer 1

原因是当调用imageToDataUri时并不总是加载图像。您应该通过添加事件监听器等待它完全加载，并在调用imageToDataUri()之前等待"加载"事件。

见HTML5 canvas - drawImage不总是绘制图像