キャンバス - phpまたはjsで画像に保存

Question

キャンバス要素があり、ファイルシステムにjpgという名前で保存したいと思います。

var canvas = document.getElementById("myCanvas"); 
var dataURL = canvas.toDataURL(); 
console.log(dataURL) 

PHPまたはJSのいずれかを使用できます。

これは可能ですか？それは容易であるように思われる。

Answer 1

あなたはこのソリューションをデータURLとしてhreafとのダイナミックリンクを作成して、ダウンロードを強制するためにクリックして、リンク

var canvas = document.getElementById("myCanvas"); 
 
var dataURL = canvas.toDataURL(); 
 
console.log(dataURL); 
 

 
var e = document.createElement('a'); 
 
     var href = dataURL 
 
     e.setAttribute('href', href); 
 
     e.setAttribute('download', "FILE NAME.png"); 
 
     document.body.appendChild(e); 
 
     e.click(); 
 
     document.body.removeChild(e);

<canvas id="myCanvas"></canvas>

Answer 2

を削除するbase64で、この

URLを取得しようとすることができます既にクリックイベントがバインドされている要素が既に存在する場合は動作します：

var url = canvas.toDataURL(); 
var link = document.getElementById('-insert a element id here'); 
link.download = "DownloadName"; 
link.href = url; 

これでデータURLが作成され、既に存在する場合はリンクのhrefに割り当てられます。'-insert a element id here'を割り当てたいリンクのIDに置き換えるだけで済みます。また

それはあなたができる存在しない場合：

var url = canvas.toDataURL(); 
var link = document.createElement('a'); 
link.download = "DownloadName"; 
link.href = url; 
link.innerHTML = "Download"; 
document.getElementById('-insert parent element here-').appendChild(link); 

これは、a要素を作成し、そのdownload、hrefとinnerHTMLプロパティを設定し、DOMに挿入し、その後、データのURLが作成されます。 '-insert parent element here-'の代わりに、リンクを内側にしたい要素に置き換えてください。