javascript - 将 Canvas 保存为 blob，然后将 blob 保存为文件

Question

这或多或少是页面上的一个图标，单击时会执行某些操作，但页面上的图标当前是一个 anchor 。我可以将其更改为 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>

fiddle 看行为: 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);
   });
}

fiddle :https://jsfiddle.net/rkqkr47w/