0

嗨，我正在创建一个优惠券生成器...在此我通过 html 表格代码显示优惠券的预览.. 之后我将在画布中转换为 base64_encode

    var canvas = document.getElementById("canvas");
        var ctx = canvas.getContext("2d");
        var data = "data:image/svg+xml," +
           "<svg xmlns='http://www.w3.org/2000/svg' width='437' height='262'>" +
             "<foreignObject width='100%' height='100%'>" +
               "<div xmlns='http://www.w3.org/1999/xhtml' style='font-size:40px'>" +
                 "<div xmlns='http://www.w3.org/1999/xhtml' style='font-size:40px'>"+$("#coupon_td").html()+"</div>" +
               "</div>" +
             "</foreignObject>" +
           "</svg>";
        var img = new Image();
        img.src = data;
        img.id = "base64_img";
        img.onload = function() { ctx.drawImage(img, 0, 0); }

        $("form").append("<input type='hidden' id='base_64_img' name='base_64_img' value='"+canvas.toDataURL()+"' />");

第一次画布会在第二次之后空白，它会没事的..为什么会发生这种情况？请帮我 ：（

4

1 回答 1

1

我在这里运行了你的代码，一切对我来说都很好。因此，唯一可能破坏您的代码的是“image.onload”。在设置“image.src”之前尝试放置它。

像这样：

var img    = new Image();
img.onload = function() { ctx.drawImage(img, 0, 0); }
img.src    = data;
img.id     = "base64_img";

这样，在您设置其 onload 回调之前，您的图像就不可能准备好。

于 2013-05-22T01:05:00.130 回答