Question

好吧，如果我把代码放在那里然后解释它以便你得到我想做的事情，我认为这是最好的。我基本上遵循（＆＃39;有点）此代码示例here并对其进行了调整以使用我的数据。

getBase64Image: function () {
    var self = this,
        svgData = new XMLSerializer().serializeToString(this.svg),
        canvas = document.createElement("canvas"),
        ctx = null,
        img = document.createElement("img");
    $("body").append($(img).attr("id", "tmpImg").css("visibility", "hidden"));
    canvas.setAttribute("width", (self.Width * 5).toString() + "px");
    canvas.setAttribute("height", (self.Height * 5).toString() + "px");
    ctx = canvas.getContext("2d");

    ctx.fillStyle = "#FFFFFF";
    ctx.fillRect(0, 0, (self.Width * 5), (self.Height * 5));
    $(img).on("load", function () {
        ctx.drawImage(img, 0, 0, (self.Width * 5), (self.Height * 5));
        var event = jQuery.Event("pngexportcomplete");
        event.image64 = canvas.toDataURL("image/png").split(",")[1];
        event.time = new Date();
        $(self).trigger(event);
        //I added this based on this**
    }).each(function () {
        if (this.complete) $(this).load();
    });
    img.setAttribute("src", "data:image/svg+xml;base64," + btoa(svgData));
}

** this

然后我有一个事件监听器附加到这个元素等待pngexportcomplete事件，我基本上用__doPostBack();发送它（是的，我正在使用ASP webforms）。

问题

我遇到的主要问题是load事件不一直被触发。它有时会这样做，但有时无法输入该代码部分，我似乎无法找到重现它的步骤。换句话说，它似乎是随机的。

但是，自爱因斯坦以来，我们知道巧合很少，如果不是不存在的话。所以，如果你能想到现有代码可能出错的东西，我会问你们所有人。

PS：一旦开始失败，它就会继续失败。但它并不总是在同一时间开始失败，或者至少我看不太盲目。

Answer 1

Nailed it 。我试图将SVG图像的URL数据加载到画布（不是任何图像，svg）。问题是由面具引起的。我们在svg路径上使用了面具来创建“洞”。在对象中。我们最近决定反对它（因为那些漏洞仍在捕捉鼠标事件并且无法摆脱它们）并且在单一路径上找到了多个M＆＃39; {{1像这样的属性：

它摆脱了这个错误！我已经跟踪过它是一个没有加载/喜欢其中一个svg元素的画布问题，因为任何时候我删除了一些它再次开始工作的元素。但事实证明这是那些丑陋的面具，所以要小心任何人，画布不喜欢带面具的svg，但行为不一致（有时它做工作）。似乎是掩码viewBox属性中的负值，但我还没有时间来测试它。

但无论如何，请记住它。希望有一天它会得到修复！

JQuery事件.load（）不会在动态创建的图像

问题

1 个答案: