當我們點擊保存時，我們可以在系統中保存畫布圖像，如直接下載圖像

Question

您好我已完成項目，我可以保存圖像，如下載到div然后右鍵單擊它顯示另存為圖像，我不想這樣做。 我想直接下載圖像不同於上面同時我想使用SQL服務器和mvc3 web應用程序在數據庫中保存圖像路徑。如何保存在數據庫中我需要使用任何服務器端代碼。 我谷歌但無法找到任何相關的答案。 是否可能我所問的是否可以指導我。 提前致謝。

下面的代碼是用於保存圖像，我需要更改它。

function downloadCanvas() {
    var canvas = stage.children[0].canvas;
    var oImgPNG = Canvas2Image.saveAsPNG(canvas, true);
    document.body.appendChild(oImgPNG);
  }

當我在谷歌搜索時，每個人都在使用PHP代碼。 如何在html5中使用php代碼。

Answer 1

通過Ajax將數據發送到服務器，然后另存為圖像，

var canvasData = canvas.toDataURL("image/png");
var ajax = new XMLHttpRequest();
ajax.open("POST",'save.php',false);
ajax.setRequestHeader('Content-Type', 'application/upload');
ajax.send(canvasData); 

PHP，

<?php 
if (isset($GLOBALS["HTTP_RAW_POST_DATA"]))
{
    // Get the data
    $imageData=$GLOBALS['HTTP_RAW_POST_DATA'];


    $filteredData=substr($imageData, strpos($imageData, ",")+1);

    $unencodedData=base64_decode($filteredData);

    $random_digit=md5(uniqid(mt_rand(), true));

    $fp = fopen( 'yourfolder/new'.$random_digit.'.png', 'wb' );
    fwrite( $fp, $unencodedData);
    fclose( $fp );
    //Now save the path in database!
}
?>

圖像將保存在“yourfolder / new”。$ random_digit。'。png'“。 鏈接到同一個問題，

將照片從javascript發送到服務器

Answer 2

您必須通過對Web服務器的ajax調用將圖像數據發送到服務器，如下所示：

http://www.dotnetfunda.com/articles/article1662-saving-html-5-canvas-as-image-on-the-server-using-aspnet.aspx

然后，根據圖像大小，將圖像的URL存儲到SQL Server（如果是小圖像）或存儲數據。 閱讀本文以幫助您做出選擇： 保存圖像URL或將圖像文件保存在SQL數據庫中？