Sending base64 image to server

Question

In my application, I need to send base64 format image to server. Currently what I am doing is, I am just sending the base64 image string to the server and and when I retrieve that string back from server, I am not able to display the image, I am getting the error: Image corrupted. What is the exact way to send and fetch the base64 format image? Code I am using is as follows:JS for sending base64 image source:

var imageObj = $("#target")[0];
var canvas = $("#preview")[0];
var context = canvas.getContext("2d");
context.drawImage(imageObj, c.x, c.y, c.w, c.h, 0, 0, canvas.width, canvas.height);
vData = canvas.toDataURL();
$('#crop_result').attr('src', vData);

function saveCroppedImage()
{
   var params='image_name='+vData;
    $.post('localhost/PHP/addImage.php',params,
    function(details){
   }, "json")
  .error(function(jqXHR, textStatus, errorThrown) {
    alert('err');
  });   
}

PHP source code:

 <?php

include("config.php");

$clip_Name = $_REQUEST['image_name'];
$artist_Name ="ash";

$sql = "INSERT INTO tblImageSave (fldImageSource)
       VALUES('$base64Img')";

$retval = mysql_query( $sql, $conn );
if(! $retval )
{
  die('Could not enter data: ' . mysql_error());
}

?>

http://stackoverflow.com/questions/60174/how-to-prevent-sql-injection-in-php — Andreas, Mar 13 '13 at 13:29
Looking at your code you are working with MySQL not with SQL Server. Correct? — Sebastian Meine, Mar 13 '13 at 13:29
Is your database aware that your're storing Base64 data? It might be converting it to a binary form somehow. Use PHPMyAdmin or something to get a look at the data in the database, and ensure that it's exactly what you send it. — GJK, Mar 13 '13 at 14:04
**warning** your code is vulnerable to sqlinjection attacks. — Daniel A. White, Mar 13 '13 at 14:22
I don't even know where to start... you don't even show where you send the base64 data, where does `$base64Img` come from? Where do you send the data in JS? Do you realize that your `var params='image_name='+vData;` is not how you are supposed to do it and will have issues with URL encoding? (If vData is base64, the + characters will probably be replaced by spaces, corrupting the image.) 700 bytes base64 (i.e. less than that in actual data) is insufficient for almost any image, the sql injection, etc. etc. Sorry if this may sound harsh, but please learn the basics before trying complex stuff. — Jan Schejbal, Mar 13 '13 at 15:49
@Jan Schejbal: I mainly work on JS and don't know much about PHP. In my application, user is allowed to crop an image and I am writing that cropped image part into canvas and then getting base64 format src using todataURL(). Please see the code I have edited above. — user, Mar 14 '13 at 04:14

score 0 · Answer 1 · answered Mar 13 '13 at 14:51

700 characters is most likely not enough to store your images, especially if Base64 encoded. If you insert a value that is to big for this column, MySQL will silently truncate it causing corruption.

Solution: Check what the maximum size of image you might want to store is and then size the column accordingly. While you are making changes to the column you probably should also think about storing the images as binary value to safe some space. but there seems to be no native MySQL function that would help with that.

Just to repeat what others have mentioned already: You have a gaping security hole in your code. You should take measures to prevent SQL Injection attacks. @Andreas' link is a good starting point.

Sending base64 image to server

1 Answers1