Store canvas image to mysql using path location - javascript

I'm trying to save my canvas image (generated by the user in the template) in my database. I've been through a lot of sources here, majority I've combined everything on it and got pretty much confused.
Steps that I'm trying to make:
Html form where provides different choices asked from the user (done)
Each time the user selects his/her choice, beside of it is the canvas that displays the image. (done)
A button that displays the summary of his choices and the canvas image generated through modal (done)
A button to Submit his order with the image in database using php and mysql No error! But it doesn't store my image
I don't need to download it, i just want it to directly store in my database once submitted
So where I'm stuck is in the STEP 4
I'll give a summary choice on my codes: (it works fine in my file, just giving you the outcome idea)
/*This retrieves my data my JS w/c is same file with my HTML: */
$('#review').click(function () {
$('#shape').html($('input[name="shape_design"]:checked').val());
$('#color').html($('input[name="color_design"]:checked').val());
//in this part, i am getting the image displayed in the canvas based on the user's choice
var canvasSource = document.getElementById('myCanvas');
var contextSource = canvasSource.getContext('2d');
var canvasShow = document.getElementById('show_canvas');
var contextShow = canvasShow.getContext('2d');
var image = contextSource.getImageData(0, 0, canvasSource.width, canvasSource.height);
contextShow.putImageData(image, 0, 0); });
});
$(function () { //this function converts the canvas to image, so it is now called as "Show Canvas" , it display well in my modal... not sure if its the right code
$("#submitBtn").bind("click", function () {
var base64 = $('#myCanvas')[0].toDataURL();
$("#show_canvas").attr("src", base64);
$("#show_canvas").show();
});
});
//After reviewing it, this part will perform to store it in the database.. which is quite I'm confused
$('#submitOrder').click(function(confirm){
swal({ //sweetalert style
title: "ORDER SENT", },
function(submit){
setTimeout(function(){
$('#showchoices').submit(); }, 500); //"showchoices" is the name of the Html form, it will proceed to ordersent.php
});
});
For my php which I'm not sure what I'm doing.
Ordersent.php
<? php
$shape_design = $_POST['shape_design'];
$color_design = $_POST['color_design'];
$upload_dir = "upload/"; //what does this do?
$myCanvas = $_POST['myCanvas']; //myCanvas is the name and id in my form
$myCanvas = str_replace('data:image/png;base64,', '', $myCanvas);
$myCanvas = str_replace(' ', '+', $myCanvas);
$data = base64_decode($myCanvas);
$file = $upload_dir."image_name.png";
$success = file_put_contents($file, $data);
$dbc = #mysql_connect('localhost' , 'root', '');
#mysql_select_db('order_tbl', $dbc);
$query1 = "INSERT INTO choices_tbl VALUES (NULL,'$shape_design','$color_design', '$myCanvas')";
if(#mysql_query($query1,$dbc))
{ Header("Location: /home.php"); }
else { print 'error!! '.mysql_error().''; }
?>
I tried following the instructions most of the tutorial, but it doesn't work on me.
I wanted to save it in my database using PATH , my my data type in my tables are
order_tbl
designID INT(6) NOT NULL ,
shape_design VARCHAR(20) ,
color_design VARCHAR(20) ,
myCanvas VARCHAR(150) ,
am I missing an attribute?
thanks for the help in advance! Thanks for bearing with me.

Related

Save JS data in Ajax

My current code is:
Play.save = function() {
//Hide the buttons
this.printButton.visible = false;
this.saveButton.visible = false;
this.backButton.visible = false;
//Force the game to re-render.
this.game.cameras.render(); //generally not recommended if you can help it
//Get the canvas information
var img = this.game.stage.canvas.toDataURL("image/octet-stream");
this.saveajax(img);
//Show UI again.
this.printButton.visible = false;
this.saveButton.visible = true;
this.backButton.visible = true;
}
Play.saveajax = function(img){
$.ajax
({
url: "http://localhost/ourthing/character/save.php",
type: "POST",
cache: false,
data: {
img: img
}
});
}
The file 'save.php' works (when i simply open the file). It will execute a query which it has to do. Problem here is: with this script i want to update a user with the given post data (img). But it doesnt execute on this request.
(i create data for var img and send this data to the saveajax function, which will open save.php to execute the query).
Im very new to JS/ajax. Does anyone can help me?
Best regards
apparently I cant comment, so my question is what are you getting on save.php
with command like
error_log(print_r($_REQUEST,true));
I suspect JSON issue here. can we see save.php?
Ok didn't see your previous comment, scrap that - your Jquery is not included.
Answer:
I had to include jQuery:
<script src="assets/js/jquery.js" ></script >
Thanks #Don'tVoteMeDown and #Lixus
Save.php file:
$db = framework::getDBO();
$data = array(
'canvas_character' => $_POST['img'],
);
$db->where('id', 1);
$db->update('ot_users', $data);
(i use my own framework)

When button is clicked, need to download canvas and increment sql integer by 1

I have been able to get my button to download the file (html canvas), but I need it to also increment a SQL field by one.
I am not sure how much code you will need, so I will begin by giving you the parts I am trying to get to talk to each other.
PHP:
$insert = mysql_query("update UserName set logins = logins+1 where password='$password' AND username='$username'", $connection);
HTML Button:
<div>
<a id="dload" download="YourFileName.png">Download as image</a>
</div>
JAVA (On the same page as button)
function download() {
var dt = c5.toDataURL("image/png", 1.0);
this.href = dt;
};
function insert(){
var insert = <?php $insert; ?>;
};
dload.addEventListener('click', download, false);
dload.addEventListener('click', insert, false);
The PHP code lives on a file called login.php as a variable. Login.php is included on the file that contains the HTML button and Java above.
The download part works. The SQL query is correct and works when run on the database. But I am just not sure how to integrate so it both downloads and adds one to the database.
Thanks for looking.
EDIT:
I can now get it to do both, but now it only increments the SQL field once per logon (will download every time though). The user needs to logout , then log back in for it to work properly again. I need it to increment by one every time they click download.
I changed this:
function download() {
var dt = c5.toDataURL("image/png", 1.0);
this.href = dt;
};
function insert(){
var insert = <?php $insert; ?>;
};
dload.addEventListener('click', download, false);
dload.addEventListener('click', insert, false);
to this (which is what I had originally):
function download() {
var dt = c5.toDataURL("image/png", 1.0);
this.href = dt;
};
dload.addEventListener('click', download, false);
And changed my button to this:
echo <a id="dload" download="YourFileName.png" value="<?php echo $insert; ?>">Download as image</a>

Posting phonegap image to php/mysql - image field disappears from post request?

I am retrieving an image from a user's gallery, and trying to post the base64 encoded version to a server using php and mysql. The base64 string returned is:
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
The code used to post (base64 string is cameraPic):
$.post("https://www.domaintopostto.co.uk/API/users.php", { user: usernamePost, userID: result.id, gender: gender, image: cameraPic }, function (data) {
console.log(data);
console.log("HERE");
if (data.result = "Added") {
window.location = "sportsSelector.html";
}
});
PHP code on the server:
$image = $_POST['image'];
$base64img = str_replace('data:image/jpeg;base64,', '', $image);
$sql = "INSERT INTO userActivityLocation(user, userID, gender, image)VALUES('$user', '$userID', '$gender', '$base64img')";
The base64 string does not appear in the db. In fact, the image: cameraPic pasrt of the request entirely disappears.....it isnt there in the network view in chrome. The other fields fire off okay and show up in chrome. No errors in console, none echoed from the server.
Any advice would be greatly appreciated thankyou!
i tried to replicate your scripts and this is working for me :
var cameraPic = "yourverylongencodedstring";
$.post("query.php", { image: cameraPic }, function (data) {
console.log(data);
});
on query.php i have :
<?php
$image = $_POST['image'];
$base64img = str_replace('data:image/jpeg;base64,', '', $image);
echo $base64img;
?>
and i can see the correct response string in network panel in chrome;
so i am wondering:
-you're passing an empty cameraPic var?
-if it doesn't show up after the sql query, the sql field is large enough for the string?
-you have not whitelisted "www.domaintopostto.co.uk" ?
Trying to guess!

No way to pass data using form with Uploadify

sorry if I am being redundant but I've tried every single example I found here and on google :D
What I am trying to do is on the upload of image, what was typed on inputbox will be send along to the uplodify.php where my insert is. My problem is, name of picture has being saved to the mysql but what was typed on the textfield dont.
Would you guys let me know what is going on?
This is the part of my code
'multi' : true,
'auto' : false,
'onUploadStart' : function(file) {
$("#file_upload").uploadify('settings', 'formData', {'galeria': $('#galeria').val()});
},
<form id="form1" name="form1" action="">
<p>
<input type="file" id="file_upload" name="file_upload" />
<br>
<br>
Galeria<br>
<label>
<input type="text" name="galeria" id="galeria">
uplodify.php
$galeria = $_POST['galeria'];
$regiao = $_POST['regiao'];
if (!empty($_FILES)) {
$img = $_FILES['Filedata']['name'];
$ext = substr($img, -4);
$img = md5($img).date("dmYHis").$ext;
$tempFile = $_FILES['Filedata']['tmp_name'];
$targetPath = $_SERVER['DOCUMENT_ROOT'] . $_REQUEST['folder'] . '/';
$targetFile = str_replace('//','/',$targetPath) . $img;
$adicionar = mysql_query ("INSERT INTO imagens (foto, galeria, regiao) VALUES('$img','$galeria','$regiao')");
// $fileTypes = str_replace('*.','',$_REQUEST['fileext']);
// $fileTypes = str_replace(';','|',$fileTypes);
// $typesArray = split('\|',$fileTypes);
// $fileParts = pathinfo($_FILES['Filedata']['name']);
// if (in_array($fileParts['extension'],$typesArray)) {
// Uncomment the following line if you want to make the directory if it doesn't exist
// mkdir(str_replace('//','/',$targetPath), 0755, true);
move_uploaded_file($tempFile,$targetFile);
echo str_replace($_SERVER['DOCUMENT_ROOT'],'',$targetFile);
// } else {
// echo 'Invalid file type.';
// }
}
Try changing your onUploadStart method to extend the uploadify formData property like this:
onUploadStart: function ( file ) {
var $fileUpload = $('#file_upload')
, formData = $fileUpload.uploadify('settings', 'formData')
, newFormData = $.extend({}, formData, { galeria: $('#galeria').val() });
$fileUpload.uploadify('settings', 'formData', newFormData);
}
I finally managed to made it work
This is the code I used
$('#file_upload').attr('file_upload', response).show();
$.post("insert2.php",{name: fileObj.name, galeria: $("#galeria").val(), regiao: $("#regiao").val()}, function(info) {
alert(info); // alert UPLOADED FILE NAME
});
}
});
Now I have a different problem lol it always show right...
Since the code to save the file on dabase is on insert2.php and the code to rename the picture inside the uploadify.php. How can I save the new name on the database instead the name of file I uploaded?
Another question.... is that a way to generate a thumbnail based on those pictures on database?

HTML5 URL to saved image displays previously created image when clicked

I have an HTML5 app that saves the canvas image to the server and then provides a link to that image that opens in a new window.
This works fine the first time I save it, but if I create and save a new image and then click on the link it displays the old image that was previously created.
Clicking on refresh will force it to display the new one, but I was wondering if there is a way to make sure it displays the correct image so that I don't have to refresh the page?
Below is what I am using to save the image.
<script>
function saveImageAs (imgOrURL) {
if (typeof imgOrURL == 'object')
imgOrURL = imgOrURL.src;
window.win = open (imgOrURL);
setTimeout('win.document.execCommand("SaveAs")', 500);
}
</script>
<script type="text/javascript">
//****************************************************************
// Save canvas content into image file. //
//****************************************************************
function saveViaAJAX()
{
document.getElementById('saveimage').style.visibility="hidden";
document.getElementById("debugFilenameConsole").innerHTML="Please wait while your image is been generated";
var testCanvas = document.getElementById('canvas');
var canvasData = testCanvas.toDataURL("image/jpg");
var postData = "canvasData="+canvasData;
var debugConsole= document.getElementById("debugConsole");
debugConsole.value=canvasData;
//alert("canvasData ="+canvasData );
var ajax = new XMLHttpRequest();
ajax.open("POST",'savecanvas.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 <a target='_blank' href='myimage.php'> MyImage.jpg"+ajax.responseText+"</a><br>Reload this page to start a new image or click on the link above to open the file.";
}
}
ajax.send(postData);
}
</script>
And the 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;
// Save file. This example uses a hard coded filename for testing,
// but a real application can specify filename in POST variable
$fp = fopen( 'MyImage.jpg', 'wb' );
fwrite( $fp, $unencodedData);
fclose( $fp );
}
header("Content-Type: image/jpg");
header("Expires: 0");
header("Cache-Control: must-revalidate, post-check=0, pre-check=0");
header("content-disposition: attachment; filename=MyImage.jpg");
imagejpeg($img, null, 100);
?>
Because you are giving the image the same name and path, the browser is helpfully caching it for you.
Use a unique path to avoid this!
You can try
var random=new Date();
var random2=getTime();
var rand=random+random2;
imgOrURL = imgOrURL.src+'?rnd='+rand
or for PHP
$rand=rand();
MyImage.php?rand=<?=$rand?>
or
$image='MyImage.php?rand='.$rand.'';
For future use, to save headache. Add dates and times first because using md5 , sha1() or a rand() or JavaScript unique key can be a nightmare, example:
/// This is much cleaner
/11.1.2012/11.05/eachier93.jpg
/11.1.2012/11.05/4358390485/93.jpg
/11.1.2012/11.10/3249203489834/234234.jpg
/// then this
/files/342748234234234/234982348394/333535.jpg
/files/4535345345/234234234234/3332.jpg
/files/23423434324/023840348234/2343.jpg

Categories