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

：ロード用

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

、あなたが使用する必要があります。

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

Answer 2

あなた#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を設定するのが理想的です。 K3Nの答えに述べたようにので、私のために動作しませんでした@

Answer 3

：

理想的には、何らかの形でクリックする前に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(); 
});