javascript - Canvas.toDataURL() 返回一个没有扩展名的文件

Question

单击保存按钮时，我正在将 HTML Canvas 转换为 jpg。我使用下面的代码:

$('#save').click(function(e){
    var canvas = $('#myCanvas')[0];
    var image = canvas.toDataURL("image/png").replace("image/png","image/octet-stream");   
    window.location.href=image; // it will save locally
});

不幸的是，我下载的文件没有任何扩展名。我想要的是当我点击下载按钮时，浏览器必须从页面下载带有文件扩展名的文件。

谢谢

Answer 1

@K3N 的回答对我不起作用，因为如前所述:

Ideally you set the href before the click somehow.

我在它的基础上构建并做到了这一点，效果很好。

var btnSave = document.getElementById('btnSave');
btnSave.addEventListener('click', function() {
    var image = photo.toDataURL("image/png");
    var anchor = document.createElement('a');
    anchor.setAttribute('download', 'myFilename.png');
    anchor.setAttribute('href', image);
    anchor.click();
});