imagefill（）问题与PHP

The code below makes an AJAX call, sending data to a PHP page that attempts to use imagefill(). If you look in your console, you'll realize that the post is sent and the response is correct. Firebug reveals that the image is also the correct image. I know the image is being copied and replaced correctly, but the imagefill part just doesn't work. I'm guessing you can ignore everything but the PHP page at the bottom. Please help.

HTML

<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml' xml:lang='en' lang='en'>
  <head>
    <meta http-equiv='content-type' content='text/html;charset=utf-8' />
    <link type='text/css' rel='stylesheet' href='test.css' />
    <script type='text/javascript' src='test.js'></script>
  </head>
<body>
  <div id='wow'>
    <img id='paint' src='paint.png' alt='paint' />
  </div>
</body>
</html>

test.css

#wow{
  display:table-cell; width:500px; height:700px; background:#000; vertical-align:middle;
}
#paint{
  width:500px; height:400px;
}

test.js

var pre = onload, doc, bod, E, C, phpEncode, phpDecode, post; // change var pre name if using same technique onload on a different page
onload = function(){
if(pre)pre();

doc = document; bod = doc.body;
E = function(e){
  return doc.getElementById(e);
}
C = function(e){
  return doc.createElement(e);
}
phpEncode = function(obj){
  var r = [];
  if(obj instanceof Array){
    for(var i=0,l=obj.length; i<l; i++){
      r.push(phpEncode(obj[i]));
    }
    return '%5B'+r.join(',')+'%5D';
  }
  else if(typeof obj === 'object' && obj){
    for(var i in obj){
      if(obj.hasOwnProperty(i)){
        var v = obj[i], s;
        if(typeof v === 'object' && v){
          s = encodeURIComponent('"'+i.replace('"', '\\"')+'":')+phpEncode(v);
        }
        else{
          v = typeof v === 'string' ? '"'+v.replace('"', '\"')+'"' : v;
          s = encodeURIComponent('"'+i.replace('"', '\\"')+'":'+v);
        }
        r.push(s);
      }
    }
    return '%7B'+r.join(',')+'%7D';
  }
  else{
    r = typeof obj === 'string' ? '"'+obj.replace('"', '\\"')+'"' : obj;
    return ''+r;
  }
}
phpDecode = function(url){
  return eval('('+decodeURIComponent(url)+')');
}
post = function(send, where, success, context){
  var x = new XMLHttpRequest || new ActiveXObject('Microsoft.XMLHTTP');
  var c = context || this;
  x.open('POST', where); x.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
  x.onreadystatechange = function(){
    if(x.readyState === 4 && x.status === 200){
      if(success)success.call(c, phpDecode(x.responseText));
    }
  }
  if(typeof send === 'object' && send && !(send instanceof Array)){
    var r = [];
    for(var p in send){
      r.push(encodeURIComponent(p)+'='+phpEncode(send[p]));
    }
    x.send(r.join('&'));
  }
  else{
    throw new Error('send must be an Object');
  }
}
var p = E('paint');
p.onclick = function(ev){
  var e = ev || event;
  var b = p.getBoundingClientRect(), x = e.clientX - b.left, y = e.clientY - b.top;
  post({paint:{img:p.src, x:x, y:y, r:255, g:0, b:0}}, 'ajax.php', function(d){
    var ni = C('img');
    ni.src = d.src;
    ni.onload = function(){
      p.src = ni.src;
    }
  });
}

}

ajax.php

<?php
function imgResizeToPNG($src, $out, $width = false, $height = false){
  $w = $width; $h = $height; $si = imagecreatefromstring(file_get_contents($src)); $ow = imagesx($si); $oh = imagesy($si); $ir = $ow/$oh; $x = $y = 0;
  if($w === false && $h === false){
    $w = $ow; $h = $oh;
  }
  else{
    if($w === false){
      $w = $ow;
    }
    if($h === false){
      $h = $w*$oh/$ow;
    }
    if($w/$h > $ir){
      $w = $h*$ir;
    }
    else{
      $h = $w/$ir;
    }
  }
  $w = floor($w); $h = floor($h); $ni = imagecreatetruecolor($w, $h); imagesavealpha($ni, true);
  imagefill($ni, 0, 0, imagecolorallocatealpha($ni, 0, 0, 0, 127)); imagecopyresampled($ni, $si, $x, $y, 0, 0, $w, $h, $ow, $oh);
  imagepng($ni, $out, 0); imagedestroy($si);
  return $ni;
}
if(isset($_POST['paint'])){
  $j = json_decode($_POST['paint']); $o = new StdClass;
  $src = uniqid().'.png'; $ci = imgResizeToPNG($j->img, $src); imagefill($ci, round($j->x), round($j->y), imagecolorallocate($ci, $j->r, $j->g, $j->b));
  imagedestroy($ci); $o->src = $src;
  echo json_encode($o);
}
?>

Here's paint.png:

enter image description here

I found that I needed to re-save the image after altering it. It was fixed after changing the bottom of ajax.php to:

if(isset($_POST['paint'])){
  $j = json_decode($_POST['paint']); $o = new StdClass;
  $src = uniqid().'.png'; $ci = imgResizeToPNG($j->img, $src); imagefill($ci, round($j->x), round($j->y), imagecolorallocate($ci, $j->r, $j->g, $j->b));
  imagepng($ci, $src, 0); imagedestroy($ci); $o->src = $src;
  echo json_encode($o);
}

Now my question is why, this is happening so slowly? Anyone?