0

我在站点中开发了一个优惠券生成器模块，我创建了一个 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 中运行。

4

1 回答 1

1

在您的代码中，您正在生成一个“SVG 图像”并尝试转换为 toDataURL()。

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

这是问题，从这个URL toDataURL ：

如果请求的类型不是image/png，并且返回值以data:image/png开头，则不支持请求的类型。

在这个小提琴代码中，如果你看到打印输出，“data:image/png;base64”。它应该是“数据：图像/SVG；base64”。

不要创建 svg 图像，而是使用canvas 元素和 javascript 来绘制相关的横幅图像，如果您获取输出，请尝试在浏览器中复制和粘贴。（它可能工作）。

检查这个名为SVG.toDataURL 的js 插件

希望这可以帮助。

于 2013-01-02T11:44:39.910 回答