将画布保存为blob，然后将blob保存为文件

Question

这或多或少是页面上的一个图标，单击该图标时会执行某些操作，但页面上的图标当前是一个锚点。我可以将其更改为div（所有其余图标在我的UI中都是div），但由于某种原因，以下操作不起作用。

为什么第一次点击没有注册？

$('#a').click(save);

function save(ev) {
  $('#canvas')[0].toBlob((blob) => {
    let URLObj = window.URL || window.webkitURL;
    ev.target.href = URLObj.createObjectURL(blob)
    ev.target.download = "untitled.png";
  });
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<canvas id='canvas'></canvas>
<a id='a'>click me to save</a>

小提琴看行为：https://jsfiddle.net/udbq3fb7/

Answer 1

通过大量的试验和努力，不使用第三方，这里的答案也是有效的：

$('#a').click(save);

function save(ev) {
   $('#canvas')[0].toBlob((blob) => {
        let URLObj = window.URL || window.webkitURL;
        let a = document.createElement("a");  
        a.href = URLObj.createObjectURL(blob);
        a.download = "untitled.png";
        document.body.appendChild(a);
        a.click();
        document.body.removeChild(a);
   });
}

小提琴：https://jsfiddle.net/rkqkr47w/

Answer 2

以下是现阶段的演练：

1. 用户点击。
2. 事件将在文档中分派。
3. EventHandlers触发[如果有]。
4. 发生默认点击行为[如果未在3.中阻止]。

现在，您的代码尝试做的是通过在事件处理程序（3.）中更改<a>的href来覆盖click（4.）操作的默认行为。

这个技巧通常有效，因为3.发生在4.之前，但在你的情况下，你在3中调用异步方法，并且只有在调用异步回调后才会更改href。

所以你有了 ... 3. Canvas.toBlob（回调） 4.发生默认点击行为 ... ñ。回调触发（更改默认行为）

当你的回调被调用时，你的点击事件已经很久了，改变它的href只会在下次点击时发生。

---

您可以在此回调中直接调用<a>的click方法，但它会导致无限循环，除非您删除事件处理程序并再次重新分配它，但它可能更容易创建一个新的<a>元素，你会之后删除，甚至更容易使用像FileSaver.js这样的库，它可以处理旧浏览器中的一些怪癖。

$('#a').click(save);

function save(ev) {
  $('#canvas')[0].toBlob((blob) => {
    saveAs(blob, "untitled.png");
  });
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/1.3.3/FileSaver.js"></script>
<canvas id='canvas'></canvas>
<a id='a'>click me to save</a>