PHP resize image on server and return via ajax

Question

I have the following PHP code to resize an image (i know this image will be a png so no need for checking...)

// The file
//$filename = $_POST['original'];
$filename = 'planets.png';

// Set a maximum height and width
$width = 200;
$height = 200;

// Content type
header('Content-Type: image/png');

// Get new dimensions
list($width_orig, $height_orig) = getimagesize($filename);

$ratio_orig = $width_orig/$height_orig;

if ($width/$height > $ratio_orig) {
   $width = $height*$ratio_orig;
} else {
   $height = $width/$ratio_orig;
}

// Resample
$image_p = imagecreatetruecolor($width, $height);
imagecreatefrompng($filename);
imagecopyresampled($image_p, $image, 0, 0, 0, 0, $width, $height, $width_orig, $height_orig);

// Output
imagepng($image_p);

However, I would like to be able to return this to my page via ajax... see the code below:

<div data-img-src="planets.png"></div>

<script type="text/javascript">
$("div[data-img-src]").each( function() {
  $.ajax({
    type: "POST",
    url: "/image-resize.php",
    data:  { 
      original: $(this).attr("data-img-src") 
    },
    dataType: "html",
    success: function(result) {
      $(this).append(result);
    }
  });
});
</script>

Any ideas what I need to do to make this work??

EDIT!

Alternatively, is this an acceptable way to achieve the same desired result?

$("div[data-img-src]").each( function() {
  $(this).append("<img src='/image-resize.php?original="+$(this).attr("data-img-src")+"' />"); 
  // COUPLED WITH $_GET... in the php
});

Answer 1

this in the context of the ajax function does not refer to the element. You can correct this with the following code:

$("div[data-img-src]").each( function() {
  var element = $(this);
  $.ajax({
    type: "POST",
    url: "/image-resize.php",
    data:  { 
      original: element.attr("data-img-src") 
    },
    dataType: "html",
    success: function(result) {
      element.append(result);
    }
  });
});

Also, is your PHP script definitely outputting HTML?

Answer 2

Why don't you use TimThumb? To be honest, it doesn't seem like you need to AJAX request the server at all.

What this code does it creates a hidden img on the page, stores it's width and height as variables, works out which is bigger (width or height), then returns a cropped img.

You will need timthumb.php in your base directory for this code to work. I've changed your original DIV element to an IMG element as obviously DIV's cannot receive a SRC attribute to be turned into an image (you could of course alter the code below to output the image as a background-image of a DIV though).

$("img[data-img-src]").each( function() {
    imgSrc = $(this).attr("data-img-src");
    $('body').append('<img class="hidden-img" src="'+imgSrc+'" style="visibility:hidden;>');
    imgWidth = $('.hidden-img').outerWidth();
    imgHeight = $('.hidden-img').outerHeight();
    imgString = '/timthumb.php?src='+imgSrc;
    if(imgWidth > imgHeight){
        imgString = imgString+'&h=200&q=90';
    } else {
        imgString = imgString+'&w=200&q=90';
    }
    $('.hidden-img').remove();
    $('body').append('<img src="'+imgString+'">');
});
</script>