Question

我在网站上开发了优惠券生成器模块我以html格式创建优惠券，并使用JavaScript函数在画布中填充该html值

function checkcanvas(id) {
    var canvas = document.getElementById("canvas");
    var ctx = canvas.getContext("2d");
    var data = "<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'>"
        +  $("#coupon_td").html()
        + "</div>"
        + "</foreignObject>"
        + "</svg>";

    var DOMURL = self.URL || self.webkitURL || self;
    var img = new Image();
    var svg = new Blob([data], {type: "image/svg+xml;charset=utf-8"});
    var url = DOMURL.createObjectURL(svg);
    img.onload = function() {
        ctx.drawImage(img, 0, 0);
        DOMURL.revokeObjectURL(url);
    };
    img.src = url;

    if(id == 2) {
        document.getElementById('base_64_img').value = canvas.toDataURL();
    }
}

base_64_img只是一个隐藏元素，所以我可以将数据发布到我的php代码中，并使用base64代码创建一个图像。

我面临的最大问题是，此代码在Mozilla Firefox中几乎完全适用于所有版本，但不适用于Google Chrome。

Answer 1

在您的代码中，您正在生成“SVG IMAGE”并尝试转换为toDataURL（）。

var svg = new Blob([data], {type: "image/svg+xml;charset=utf-8"});

这是问题，从URL到.DataURL：

如果请求的类型不是image / png，则返回值开始使用data：image / png，则不支持请求的类型。

如果您看到打印输出，请在此fiddlecode中显示“data：image / png; base64”。它应该是“data：image / svg; base64”。

不使用创建svg图像，而是使用canvas element and javascript to draw相关的横幅图像，如果您输出输出，请尝试复制＆amp;粘贴在浏览器中。（它可能有用）。

检查这个名为SVG.toDataURL

的js插件

希望这有帮助。

canvas.toDataURL（）除了mozilla firefox之外没有正常工作

1 个答案: