將HTML 5鏡像圖像保存到服務器

-2

我需要將id ='area'的畫布數據作爲圖像保存到我的服務器的文件夾/使用javascript上傳。我試圖用window.open（canvas.toDataURL（「image/png」））;在瀏覽器中顯示圖像。但瀏覽器會顯示空白屏幕將HTML 5鏡像圖像保存到服務器

來源

2012-11-11 user1567505

不夠清楚。如果沒有明確說明您採取了哪些步驟來解決問題以及您遇到什麼問題的具體細節，請不要提問。 SO不是爲了解決你的問題而來，我們來幫忙。 –

請嘗試permadi.com/blog/2010/10/html5-saving-canvas-image-data-using-php-and-ajax/ –

可以使用toDataURL()

注意：本toDataURL（）方法需要繪製在畫布上的任何圖片作爲代碼執行它被託管的Web服務器上相同的域。如果不符合此條件，則會引發SECURITY_ERR異常。

例如

<body> 
    <canvas id="myCanvas" width="578" height="200" style="display:none;"></canvas> 
    <img id="canvasImg" style="border:1px solid #9C9898;" alt="Right click to save me!"> 
    <script> 
     var canvas = document.getElementById('myCanvas'); 
     var context = canvas.getContext('2d'); 

     // draw cloud 
     context.beginPath(); 
     context.moveTo(170, 80); 
     context.bezierCurveTo(130, 100, 130, 150, 230, 150); 
     context.bezierCurveTo(250, 180, 320, 180, 340, 150); 
     context.bezierCurveTo(420, 150, 420, 120, 390, 100); 
     context.bezierCurveTo(430, 40, 370, 30, 340, 50); 
     context.bezierCurveTo(320, 5, 250, 20, 250, 50); 
     context.bezierCurveTo(200, 5, 150, 20, 170, 80); 
     context.closePath(); 
     context.lineWidth = 5; 
     context.fillStyle = '#8ED6FF'; 
     context.fill(); 
     context.strokeStyle = '#0000ff'; 
     context.stroke(); 

     // save canvas image as data url (png format by default) 
     var dataURL = canvas.toDataURL(); 

     // set canvasImg image src to dataURL 
     // so it can be saved as an image 
     document.getElementById('canvasImg').src = dataURL; 

    </script> 
    </body>

來源

2012-11-11 06:05:31

我其實在我的早期項目解決了這個問題。

而用戶/服務器之間的回合安全和這種方法繞過它，因爲我在這裏的另一個答案中提到可能的問題。

這可能是一個笨拙的方式來做到這一點，但至少它的工作原理，並沒有我不允許發佈代碼基於一些合法的東西馬寶。

客戶端：

你可以做的是讓用戶單擊一個按鈕來激活一個異步回發，然後纔回發是跑在您選擇的格式轉換你的畫布的內容爲圖像，並然後將其轉換爲base64字符串，並將其放置在隱藏文本框中，並將文本框的內容發送到服務器，就像您使用常規註冊表單一樣。

在服務器：

轉換你的新獲得性的base64字符串返回到相同格式的圖片，你創造了它在客戶端，並將其保存。

來源

2012-11-11 14:21:04

將HTML 5鏡像圖像保存到服務器

回答

相關問題