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

当单击保存按钮时，将一个html画布转换为jpg。我使用下面的代码Canvas.toDataURL（）返回一个没有扩展名的文件

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

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

感谢

来源

2014-01-21 Emmanuel Gabion

你应该使用：

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

加载，你需要使用：

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

来源

2014-01-21 07:27:11

谢谢..但它重定向到一个新标签。无论如何谢谢:) –

@EmmanuelGabion：是的，它会在新标签中打开 –

假设你#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。

来源

2014-01-21 19:05:06 K3N

@因为提到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(); 
});

来源

2015-09-08 18:13:42 beon

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

回答

相关问题