1

I have been doing research for quite a while already about this problem, and still haven't figure out the best way to resize the image prior to sending it to my Apache server via ajax.

I am trying to use the html5 canvas approach mentioned in this post

But I am having a hard time trying to work with the line:

var dataurl = canvas.toDataURL("image/png");

I would like to pass it to my server like a normal image file, so that in php i can call the follow code like $_FILES['file']['error'] to check the size, type, duplicate, etc... (just like how i would normally go about uploading the image) Most importantly, I would like to use move_uploaded_file function in php to upload those image to server.

However, using the html5 canvas resize approach, I can no longer do so, since after decoding and trimming out the header part of the canvas.toDataURL, I am left with just a image itself to work with in my php code. 

define('UPLOAD_DIR', 'uploads/');
    $img = $_POST['image'];
    $img = str_replace('data:image/jpeg;base64,', '', $img);
    $img = str_replace(' ', '+', $img);
    $data = base64_decode($img);
    $file = UPLOAD_DIR . uniqid() . '.jpg';
    $success = file_put_contents($file, $data);
    print $success ? $file : 'Unable to save the file.';

Any other approach to achieve this action without the HTML5 canvas?

(Bottom line: I don't have any luck merging the traditional upload image with the new html5 canvas image resize technique)

Community
  • 1
  • 1
Ryan Fung
  • 2,069
  • 9
  • 38
  • 60
  • 1
    Why not just create an image resource from the base64 encoded string, eg ~ `$img = imagecreatefromstring(base64_decode($string))`. From there you can get all sorts of data about the image – Phil May 25 '15 at 03:03
  • 1
    Any example please? So I will pass my $img inside my ajax call to my php server? – Ryan Fung May 25 '15 at 03:13

0 Answers0