Javascript 使用循环将画布下载到图像

我想将文本放在画布上，并将其作为图像下载到foreach循环中。 文本包含不同的字体。我想下载230张这样的图片

代码：

<div id="divFontPreview">
    <ul id="ulFonts">
        <li><a href="#" title="Times" new="" roman="" id="Times" style="font-family: Times New Roman">
        Times New Roman</a></li><li><a href="#" title="ABeeZee" id="ABeeZee" style="font-family: ABeeZee">
        ABeeZee</a></li><li><a href="#" title="Abel" id="Abel" style="font-family: Abel">Abel</a></li><li>
        <a href="#" title="Abril" fatface="" id="Abril" style="font-family: Abril Fatface">Abril
        Fatface</a></li><li><a href="#" title="Aclonica" id="Aclonica" style="font-family: Aclonica">
        Aclonica</a></li><li><a href="#" title="Acme" id="Acme" style="font-family: Acme">Acme</a></li><li>
        <a href="#" title="Action" man="" id="Action" style="font-family: Action Man">Action
        Man</a></li><li><a href="#" title="Actor" id="Actor" style="font-family: Actor">Actor</a></li>
    </ul>
</div>

<div>
    <canvas id="fonts" width="293" height="40" style="position: relative; border: solid;
        background-color: rgba(0,0,0,0)">
    </canvas>
</div>

---

代码运行时没有任何错误，但未下载任何文件。如果我删除foreach循环并将事件添加到每个

锚定
标记中，它就会被下载。
你让客户端计算机做了大量的工作和等待。相反，您可以在预制作中创建字体图像，并将它们组合到一个精灵表中。将spritesheet发送给客户端，让客户端从spritesheet上删除每个字体。@markE:这是一个虚拟应用程序，我将完全按照您所说的做。此代码仅运行一次，以创建所有字体的图像。
$('#btnStart').click(function () {
        setInterval(function () {
                $('#divFontPreview').find('a').each(function () {
                    debugger;
                    var text = $(this).text().trim();
                    var c = document.getElementById("fonts");
                    var ctx = c.getContext("2d");
                    ctx.clearRect(0, 0, c.width, c.height);
                    ctx.font = "20px " + text;
                    ctx.fillText(text, 10, 28);
                    var dt = c.toDataURL("image/png");
                    dt = dt.replace('data:image/png;base64', 'data:application/octet-stream;base64');
                    $(this).attr('download', text + '.png');
                    $(this).attr('href', dt);
                });
              }, 500);
     });