在 Base64 中传递 html5 画布值的问题答案

【问题标题】：issue with html5 canvas value passing in Base64在 Base64 中传递 html5 画布值的问题
【发布时间】：2013-05-22 09:05:00
【问题描述】：

您好，我正在创建优惠券生成器... 在此我通过 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()+"' />");

第一次画布会在第二次之后变空白。为什么会发生这种情况？？请帮帮我:(

【问题讨论】：

标签： php jquery html codeigniter canvas

【解决方案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 回调之前，您的图像不可能准备好。

【讨论】：