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

在Chrome中，dataUrl是正确的，但是当我在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将按以下顺序执行上述代码：

创建新的图像对象
请参阅tmp_img.onload，并指出在图像完全加载时应该执行该代码
设置tmp_img.src并开始加载图片。
继续使用＆＃34;更多javascript＆＃34;
当图像完全加载时，执行.onload回调函数中的所有内容。

看起来你正在使用KineticJS - 是吗？

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

在Firefox中调整base64图像的大小

1 个答案: