畫布 - 使用php或js保存圖像

Question

我有一個畫布元素，想命名它並將其另存爲我的文件系統中的jpg。

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

我可以使用PHP或JS。

這可能嗎？看起來應該很容易。

Answer 1

爲base64創建hreaf作爲傳輸數據的URL動態鏈接你可以試試這個

獲取URL，然後單擊強制下載，然後刪除鏈接

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

該解決方案將如果要綁定單擊事件的元素已經存在，則工作：

var url = canvas.toDataURL(); 
var link = document.getElementById('-insert a element id here'); 
link.download = "DownloadName"; 
link.href = 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); 

這將創建數據URL，然後創建一個a元素，設置其download，href和innerHTML屬性和DOM中的插入。只需將'-insert parent element here-'替換爲您希望鏈接進入的任何元素。