出口HTML5畫布圖像到期望的web目錄

Question

我使用下面的JavaScript到HTML5畫布轉換成PNG圖片：

function imageMe() { 
     var canvasImage = document.getElementById("c"); 
     var img = canvasImage.toDataURL("image/png"); 

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

這需要用戶點擊右鍵並保存圖像的位置。

我的目標是在點擊時將圖像保存到Web目錄（覆蓋具有相同名稱的圖像），而不需要用戶下載並上傳圖像。

我的問題是如何將圖像保存到我的網站上的正確目錄中？如果我正在生成圖像客戶端等，我還需要一個Ajax文件上傳嗎？

Answer 1

如果您使用的是Web服務器

服務網頁，您應該使用@BhavinSolanki提供了出色的答案。

如果你想要讓用戶保存畫布圖像自己的電腦

。您可以使用禮灰色的FileSaverJS腳本：https://github.com/eligrey/FileSaver.js/

我不知道爲什麼，但。 ..，當前GitHub版本的FileSaverJS不適用於我（版本1.1.20150716）。因此，對於以下演示，我使用的是CloudFlare.com上託管的以前版本。

var canvas = document.getElementById("canvas"); 
 
var ctx = canvas.getContext("2d"); 
 

 
var img = new Image() 
 
img.crossOrigin = "anonymous"; 
 
img.onload = function() { 
 
    // draw an annotated image on the canvas 
 
    canvas.width = img.width; 
 
    canvas.height = img.height; 
 
    ctx.drawImage(img, 0, 0); 
 
    ctx.fillStyle = 'black'; 
 
    ctx.fillRect(0, img.height - 30, img.width, 30); 
 
    ctx.fillStyle = 'white'; 
 
    ctx.font = '14px verdana'; 
 
    ctx.textAlign = 'center'; 
 
    ctx.fillText('Hey, Koolaid Man!', img.width/2, img.height - 10); 
 
} 
 
img.src = "https://dl.dropboxusercontent.com/u/139992952/stackoverflow/KoolAidMan.png"; 
 

 
// save the canvas as an image on the users local drive 
 
$("#save").on('click', function() { 
 
    canvas.toBlob(function(blob) { 
 
    saveAs(blob, "KoolaidMan.png"); 
 
    }); 
 
});

body{ background-color: ivory; } 
 
#canvas{border:1px solid red; margin:0 auto; }

<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script> 
 
<script src='https://rawgit.com/eligrey/Blob.js/master/Blob.js'></script> 
 
<script src='https://rawgit.com/eligrey/canvas-toBlob.js/master/canvas-toBlob.js'></script> 
 
<script src='https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/2014-11-29/FileSaver.min.js'></script> 
 

 
<button id="save">Save</button> 
 
<br> 
 
<canvas id="canvas" width=300 height=300></canvas>