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+'"/>');

Canvas.toDataURL（）返回没有扩展名的文件

3 个答案: