imagefill()问题与PHP

时间:2016-07-26 07:22:48

标签: javascript php html css ajax

下面的代码进行AJAX调用,将数据发送到试图使用imagefill()的PHP页面。如果您查看控制台,您将意识到发送帖子并且响应正确。 Firebug显示图像也是正确的图像。我知道正在复制和替换图像,但imagefill部分无法正常工作。我猜你可以忽略除底部的PHP页面之外的所有内容。请帮忙。

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);
}
?>

此处paint.png

enter image description here

1 个答案:

答案 0 :(得分:0)

我发现我需要在更改之后重新保存图像。将ajax.php的底部更改为:

后修复了此问题
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);
}

现在我的问题是为什么,这种情况发生得如此缓慢?任何人吗?