php


Saving Canvas image to mysql


Every 5 seconds I have my javascript running to call the update.php file (which will hopefully add the base64 code to the mysql - although yet to figure out).
Currently, I just have the base64 code writing out to a text area called debugConsole.
I just don't get how I'm supposed to pass the javascript variable to my php update file.
HTML:
<script type="text/javascript">
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);
}
setInterval(function() { saveViaAJAX(); }, 5000);
</script>
<script language='javascript' type='text/javascript'>
//Every 5 seconds calls php update
//syncronized jax:
function myjax() {
oXhr = new XMLHttpRequest();
oXhr.open("POST", "update.php?game=<?php echo $game; ?>", false);
oXhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded; charset=utf-8");
oXhr.send(null);
}
//set an interval each 5 seconds to call your myjax method
setInterval(function() { myjax(); }, 5000);
</script>
</head>
<div>
<canvas id="testCanvas" width="300" height="300"></canvas>
</div>
<div>
<textarea id="debugConsole" rows="10" cols="60">Data</textarea>
</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>
PHP:
<?php
$random = rand();
$game = $_GET["game"];
mysql_query("UPDATE paint_s SET paint_points='$random' WHERE id ='$game'") or die(mysql_error());
echo "Updated";
?>
Sorry for my lack of knowledge, I have been doing a few tutorials and was just trying to expand on the tutorial.
First thing you want to do is open your request
ajax.open("POST",'testSave.php',true);
then want to send your data as application/x-www-url-form-encoded so set it in the content type
ajax.setRequestHeader('Content-Type', 'application/x-www-url-form-encoded');
To make sure your data is properly encoded use encodeURIComponent
var postData = "canvasData="+encodeURIComponent(canvasData);
You should also check the status to see if the request actually suceeded
if (ajax.readyState == 4)
{
if (ajax.status == 200){
//success
}
else{
//failure
}
}
I don't know if saving a base64 encoded image every 5 seconds is a good idea though.

Related Links

.htaccess rewrite url to strip a single GET value
php getting big data from url - optimise
Laravel foreach in sub foreach blade
how do resolve soap object creation error?
Cakephp Logout and rederect not working in hostgator
I don't understand the logic of this section in the TwentySeventeen WordPress theme
PHP upload to external FTP
Insert data into DB by codeigniter
Can't send data from html form with php in email [duplicate]
Retrieving Video and Background image from database using cideigniter
Insert into DB with jQuery and get Feedback
Laravel 5: update Controller in Middleware
Grab array values with keys in specified range - PHP 5.5
Full-stack Nginx reverse proxying and PHP index
Parse INI from external link
Doctrine\ ORM\ Mapping\ MappingException in Symfony

Categories

HOME
magento2
knockout.js
azure-functions
tomcat
verification
shinyapps
softlayer
activex
command-prompt
theano
website
whmcs
histogram
android-emulator
semantic-web
openflow
apache-kafka-connect
firebase-dynamic-links
cisco
port
bellman-ford
fireloop
erd
phpstorm-2017.1
xbap
freertos
supervisord
user-defined-types
pickle
susy-sass
tfsbuild
parceler
gollum-wiki
mime-types
pdf.js
ratio
function-points
hevc
points
infopath2010
polyml
grails-2.5
dreamfactory
llvm-ir
suds
system-on-chip
oauth2-playground
web-inspector
common-table-expression
realstudio
photoswipe
head.js
comm
pen
word-2007
case-when
msxml
haraka
ipywidgets
xcode6.4
xmlbeans
nsrunloop
p6spy
ftp-client
gnucash
openmrs
android-expansion-files
voronoi
pack
google-maps-api-2
largenumber
lowercase
blank-line
screen-orientation
mixins
pythonxy
enaml
supersocket.net
sequence-sql
relational-model
abstract-factory
ipod
ssmtp
fiware-bosun
baseadapter
mojo
nidaqmx
full-text-indexing
box2dweb
android-2.3-gingerbread
accessory
strdup
mft
tnt4j
ember-table
bcdedit
notin
donut-chart
towers-of-hanoi
msinfo32
cakeyframeanimation
exponent
glx
mmc3
servercontrol
asio
play2-mini
printqueue
active-record-query
hungarian-notation
uninstaller
.net-services
google-translator-toolkit

Resources

Encrypt Message