2013-08-16 55 views
0

我就拿一個單元通過使用HTML5現在我想上傳圖片到服務器(通過在使用Spring MVC +阿賈克斯我要上傳谷歌應用程序團塊存儲中的形象)任何一個可以幫助我 我在這裏的示例代碼如何在服務器上傳畫布圖片?

<video id="video" width="640" height="480" autoplay></video> 
<button id="snap">Snap Photo</button> 
<canvas id="canvas" width="640" height="480"></canvas> 
<button id="getBase" onclick="getBase()">Get Base64</button> 
<textarea id="textArea"></textarea> 

<script> 

// Put event listeners into place 
window.addEventListener("DOMContentLoaded", function() { 
    // Grab elements, create settings, etc. 
    var canvas = document.getElementById("canvas"),   
    context = canvas.getContext("2d"), 
    video = document.getElementById("video"), 
    videoObj = { "video": true }, 
    errBack = function(error) { 
    console.log("Video capture error: ", error.code); 
    }; 

    // Put video listeners into place 
    if(navigator.getUserMedia) { // Standard 
     navigator.getUserMedia(videoObj, function(stream) { 
      video.src = stream; 
      video.play(); 
     }, errBack); 
    } else if(navigator.webkitGetUserMedia) { // WebKit-prefixed 
     navigator.webkitGetUserMedia(videoObj, function(stream){ 
      video.src = window.webkitURL.createObjectURL(stream); 
      video.play(); 
     }, errBack); 
    } 

    // Trigger photo take 
    document.getElementById("snap").addEventListener("click", function() { 
     context.drawImage(video, 0, 0, 640, 480); 
    }); 

    document.getElementByID("getBase").addEventListener("click", getBase()); 

}, false);     

function getBase(){ 
    var imgBase = canvas.toDataURL("image/png"); 
    alert(imgBase); 

    document.getElementByID("textArea").value=imgBase; 
} 

`

任何一個可以幫助我,我如何上傳圖像服務器通過使用AJAX

回答

0

你可能想使用FORMDATA對象。 Mozilla有一個很好的指導如何做到這一點。他們甚至包括專門發送文件。在你的情況下,我建議將圖像數據存儲爲blob。

+0

是...謝謝重播。我使用blob存儲來保存我的圖像,但我的疑問是如何通過使用ajax將此dataurl傳遞到我的服務器。請給我一些想法 – user2563516

+0

如果您使用blob,你只需上傳斑點。你不會嘗試上傳dataURL。 – Fibericon