将 Canvas 保存为 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

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

$('#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/