javascript - 在 Firefox 中调整 base64 图像的大小

Question

我在编码和 HTML5 方面仍然是新手。我有一个带有多个 Canvas 的 HTML5 舞台。我需要从那个阶段获取 base64 图像并调整它的大小，然后获取调整大小的 Canvas 的 base64 图像。这是我使用的代码:

stage.toDataURL({
    callback: function(dataUrl) {
        var tmp_img = new Image();
        tmp_img.src = dataUrl;

        //resize image to 45x75
        var canvas = document.getElementById('hidden_canvas');
        canvas.width = 45;
        canvas.height = 75;
        var ctx = canvas.getContext("2d");
        ctx.drawImage(tmp_img, 0, 0, canvas.width, canvas.height);
        dataUrl = canvas.toDataURL();
)};

dataUrl 在 Chrome 中是正确的，但是当我在 Firefox 中运行代码时，Firefox 似乎没有生成正确的 base64 代码。

如果有任何帮助，我将不胜感激

Answer 1

您遇到了一个常见问题。

tmp_img.src 将 dataUrl 加载到您的新图像中——但这需要时间。因此，即使在加载图像之前，javascript 也会继续执行您的代码。结果是您有时会在 tmp_img 完全加载并准备好使用之前尝试 ctx.drawImage。

解决方法是重构您的代码以使用 tmp_img.onload。当 tmp_img 最终准备好使用时，.onload 触发回调函数。重构可能如下所示:

var tmp_img = new Image();

tmp_img.onload=function(){

    //resize image to 45x75
    var canvas = document.getElementById('hidden_canvas');
    canvas.width = 45;
    canvas.height = 75;
    var ctx = canvas.getContext("2d");
    ctx.drawImage(tmp_img, 0, 0, canvas.width, canvas.height);
    dataUrl = canvas.toDataURL();

}

tmp_img.src = dataUrl;

// more javascript

JavaScript 将按以下顺序执行上述代码:

1. 创建一个新的图像对象
2. 查看 tmp_img.onload 并确定它应该在图像完全加载时执行该代码
3. 设置tmp_img.src并开始加载图片。
4. 继续“更多 javascript”
5. 当图像完全加载时，执行.onload 回调函数中的所有内容。

看起来您正在使用 KineticJS——是吗？

如果是这样，那么您可以使用 stage.toImage 而不是 stage.toDataURL。这样，当执行 stage.toImage 回调时，您已经加载了图像(您不必担心等待图像加载)。然后只是 .drawImage KineticJS 在回调中提供的图像。