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 not always drawing the image

用画布绘制空白图像大约一半时间

1 个答案: