Param Blogs: March 2019

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

// Remove the headers (data:,) part.
// A real application should use them according to needs such as to check image type
$filteredData=substr($imageData, strpos($imageData, ",")+1);

// Need to decode before saving since the data we received is already base64 encoded
$unencodedData=base64_decode($filteredData);

//echo "unencodedData".$unencodedData;

//=============
   $limit = 4;
   $digit_str   = '0123456789';
   $digit = substr(str_shuffle($digit_str), 0, $limit);
   //======================
   $letter_str='abcdefhigklmnopqrstuvwxyz';
   $letter = substr(str_shuffle($letter_str), 0, $limit);
   //==================
   $filename="CANVAS$digit$letter.png";

   echo $filename;

// Save file. This example uses a hard coded filename for testing,
// but a real application can specify filename in POST variable
// $fp = fopen( 'test.png', 'wb' );
$fp = fopen( $filename, 'wb' );
fwrite( $fp, $unencodedData);
fclose( $fp );
}
?>

<!DOCTYPE html>
<html>
<head>
<title>
How To Save HTML5 Canvas Into File
</title>
<meta name="Keywords" content="html, html5, javascript canvas tutorial, javascript canvas, todataurl, saving, web development, ajax" />
<meta name="Description" content="html 5, html5, javascript canvas tutorial for web development, saving canvas" />
<script type="text/javascript">

//****************************************************************
// Example function save save canvas content into image file.
// www.permadi.com
//****************************************************************
function saveViaAJAX()
{
    var testCanvas = document.getElementById("testCanvas");
    var canvasData = testCanvas.toDataURL("image/png");
    var postData = "canvasData="+canvasData;
    var debugConsole= document.getElementById("debugConsole");
    debugConsole.value=canvasData;

    //alert("canvasData ="+canvasData );
    var ajax = new XMLHttpRequest();
    ajax.open("POST",'testSave.php',true);
    ajax.setRequestHeader('Content-Type', 'canvas/upload');
    //ajax.setRequestHeader('Content-TypeLength', postData.length);

    ajax.onreadystatechange=function()
    {
        if (ajax.readyState == 4)
        {
            alert(ajax.responseText);
            // Write out the filename.
                document.getElementById("debugFilenameConsole").innerHTML="Saved as<br><a target='_blank' href='"+ajax.responseText+"'>"+ajax.responseText+"</a><br>Reload this page to generate new image or click the filename to open the image file.";
        }
    }

    ajax.send(postData);
}

</script>
</head>

<body>

     <div>
        <canvas id="testCanvas" width="300" height="300"></canvas>
      </div>
      <div>
    <textarea id="debugConsole" rows="10" cols="60">Data</textarea>
       <p><button onclick="saveViaAJAX();">Save Via AJAX</button>   <p>
    <div id="debugFilenameConsole">Wait for a while after clicking the button and the filename of the image will be shown to you. </div>
      </div>
    <script type="text/javascript">
        // This portion of the code simply draws random circles into the canvas (it has nothing todo with saving the canvas).
        var canvas = document.getElementById("testCanvas");
        if (canvas.getContext)
        {
            var canvasContext = canvas.getContext("2d");
            for (i=0; i<150; i++)
            {
                canvasContext.fillStyle="rgb("+(parseInt(Math.random()*255))+","+(parseInt(Math.random()*255))+","+(parseInt(Math.random()*255))+")";
                canvasContext.beginPath();
                canvasContext.arc(Math.random()*350,Math.random()*350,Math.random()*20, 0,Math.PI*2,true);
                canvasContext.fill();
            }
        }
    </script>
</body>

</html>

Param Blogs

Sunday, 3 March 2019

add signature to form using canvas complete code

save canvas as file to server php