在Firefox中调整base64图像的大小

Question

我仍然是编码和HTML5的新手。 我有一个包含多个画布的HTML5阶段。 我需要从该阶段获取base64图像并调整其大小，然后获取调整后的画布的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将tmp_img.src加载到新映像中-但这需要时间。 因此，即使在图片加载之前，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. 创建一个新的Image对象
2. 请参阅tmp_img.onload并不要在图像完全加载后执行该代码
3. 设置tmp_img.src并开始加载图像。
4. 继续“更多javascript”
5. 完全加载映像后，执行.onload回调函数中的所有内容。

看来您正在使用KineticJS，是吗？

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