下面的代码进行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
:
答案 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);
}
现在我的问题是为什么,这种情况发生得如此缓慢?任何人吗?