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

Question

单击保存按钮时，我正在将 HTML 画布转换为 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

假设您的#save元素是一个锚标记（ <a ...></a> ），您可以这样做：

$('#save').click(function(e){
    var canvas = $('#myCanvas')[0];
    var image = canvas.toDataURL("image/png");
    $('#save').attr({
        'download': 'myFilename.png',  /// set filename
        'href'    : image              /// set data-uri
    });
});

理想情况下，您可以在点击之前以某种方式设置href 。

Answer 2

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

理想情况下，您可以在点击之前以某种方式设置 href。

我建立在它之上并做到了这一点，并且效果很好。

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();
});

Answer 3

你应该使用：

var canvas = document.getElementById("mycanvas");
var img    = canvas.toDataURL("image/png");

对于加载，您需要使用：

document.write('<img src="'+img+'"/>');