JQuery 事件 .load() 未在动态创建的图像上随机触发

Question

好的，我认为最好是将代码放入其中然后对其进行解释，以便您了解我想要做的事情。我基本上遵循（'kinda）这个代码示例 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 网络表格）。

问题

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

但是，自从爱因斯坦以来，我们就知道巧合即使不是不存在，也很少见。所以我问你们大家是否能想到现有代码可能有问题的地方。

PS：一旦开始失败，它就会一直失败。但它不会总是同时开始失败，或者至少我太盲目了，看不到它。

Answer 1

成功了。我试图将 SVG 图像的 URL 数据加载到 canvas 中（不是任何图像，svg）。问题是由口罩引起的。我们在 svg 路径上使用掩码在对象中创建 'holes'。我们最近决定反对它（因为那些漏洞仍在捕获鼠标事件并且无法摆脱它们）并在单个路径的 d 属性上使用多个“M”，如下所示：

<path d="M0,0 ... zM90,30 ... zM23,23">

它消除了错误！我已经追踪到它是 canvas 而不是 loading/liking svg 元素之一的问题，因为每当我删除一些元素时它又开始工作了。但事实证明是那些丑陋的面具，所以当心任何人，canvas 不喜欢带面具的 svg，但行为不一致（有时工作）。好像是masks viewBox属性中的负值，但是没时间测试了

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

JQuery 事件 .load() 未在动态创建的图像上随机触发

JQuery event .load() not firing randomly on dynamicaly created image

javascript

jquery

asp.net

image

onload

问题