php - Ajax XMLhttprequest 发布到 PHP 脚本并旋转图像
问题描述
我知道我在哪里有大问题,但我似乎无法解决它们。我正在尝试通过 Ajax 使用 PHP 旋转图像。我只想在每次按下按钮时将图像旋转 90 度。有人可以帮忙吗。我知道我正在告诉我的 PHP 脚本检索 $_POST['image'] 变量,但我没有发送一个,这就是我收到 php 错误的原因。我知道 php 脚本有效。我不知道我是否可以在我的脚本中使用 xhttp.open("GET") 。我知道我的 html 和重新加载标签中的图像还有其他问题。非常感谢任何帮助。
这是我的 JS:
<script>
function rotateImage(){
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("rotate").innerHTML = this.responseText;
}
};
xhttp.open("POST", "rotate.php", true);
xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded")
xhttp.send("<?php echo $fileName; ?>");
}
</script>
这是我的PHP:
<?php
$image = $_POST['image'];
$degree = 90;
$source = imagecreatefromjpeg($image);
// Rotate
$rotate = imagerotate($source, $degree, 0);
$image = imagejpeg($rotate, realpath($image), 100);
//echo $image;
imagedestroy($source);
imagedestroy($rotate);
?>
还有我的 HTML:
<div class="row justify-content-center mb-3">
<div class="col-lg col-auto">
<?php list($width, $height) = getimagesize($fileName); ?>
<div class="mb-1" id="rotate"><img class="rounded img-fluid" src="<?php echo $fileName; ?>" alt="Your Profile Photo" width="<?php echo $width; ?>" height="<?php echo $height; ?>" /></div>
<div class="text-center"><button onClick="rotateImage()" class="btn btn-outline-primary btn-sm"><i class="fas fa-sync-alt"></i> Rotate</button></div>
</div>
解决方案
在这个问题中,不知道最初声明的位置和方式$filename
是什么,或者特定的文件夹结构/服务器配置是什么,因此以下可能需要调整以适应您的环境,因为我的测试站点使用站点根目录之外的别名文件夹......无论如何 -使用 Ajax(或此处的 Fetch api)向 PHP 发送文件名/文件路径非常简单。PHP 脚本做了它应该做的事情,除了它不返回一个值,而是在"reload"
ajax 请求完成时强制浏览器访问图像的技巧是附加一个缓存破坏时间戳。
据说cache:'reload'
可以在Fetch
请求上设置的属性将确保图像不被缓存,但我发现这在这种情况下没有效果。
<?php
if( $_SERVER['REQUEST_METHOD']=='POST' && isset(
$_POST['filename'],
$_POST['path'],
$_POST['dir']
)){
####################
# emulate rotate.php
####################
ob_clean();
$image = sprintf('%s/%s', $_POST['path'], basename( $_POST['filename'] ) );
$angle = $_POST['dir']=='clockwise' ? -90 : 90;
$source = imagecreatefromjpeg( $image );
imagesetinterpolation( $source, IMG_MITCHELL );
$rotate = imagerotate( $source, $angle, 0 );
imagejpeg( $rotate, realpath( $image ), 100 );
imagedestroy( $source );
imagedestroy( $rotate );
list( $width, $height, $type, $attr ) = getimagesize( $image );
$args=array(
'filename' => $_POST['filename'],
'width' => $width,
'height' => $height
);
header('Content-Type: application/json');
exit( json_encode( $args ) );
}
?>
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='utf-8' />
<title></title>
</head>
<body>
<div class='row justify-content-center mb-3'>
<div class='col-lg col-auto'>
<?php
/*
$path here will be the full path and $filename
contains the web accessible path. As mentioned
my setup is complicated and relies upon aliased
folders outside site root.
*/
$path=realpath( sprintf('%s/images/uploads', getcwd() ) );
$filename='images/uploads/abronsius.jpg';
?>
<div class='mb-1' id='rotate'>
<img class='rounded img-fluid' data-path='<?php echo $path;?>' src='<?php echo $filename; ?>' alt='Your Profile Photo' />
</div>
<div class='text-center'>
<button class='btn btn-outline-primary btn-sm' data-dir='clockwise'>
<i class='fas fa-sync-alt'></i>Rotate Clockwise
</button>
<button class='btn btn-outline-primary btn-sm' data-dir='anticlockwise'>
<i class='fas fa-sync-alt'></i>Rotate Anti-Clockwise
</button>
</div>
</div>
</div>
<script>
(function(){
const d=document;
const q=(e,n=d)=>n.querySelector(e);
const qa=(e,n=d)=>n.querySelectorAll(e);
qa('button.btn').forEach( bttn=>bttn.addEventListener('click',e=>{
let img=q('img.img-fluid');
/* set the payload to send in the request */
let fd=new FormData();
fd.set('filename', img.src.split('?')[0] );
fd.set('path', img.dataset.path );
fd.set('dir', e.target.dataset.dir );
let url=location.href; //rotate.php
/* set the request parameters */
let args={
body:fd,
mode:'same-origin',
method:'post',
cache:'reload', //no discernible effect
credentials:'same-origin'
};
/* create the request */
let oReq=new Request( url, args );
/* send the request and process the response by reloading the image */
fetch( oReq )
.then( r=>r.json() )
.then( json=>{
img.src=json.filename +'?t='+( new Date() ).getTime();
img.width=json.width;
img.height=json.height;
})
.catch( err=>console.log(err) );
}));
})();
</script>
</body>
</html>
推荐阅读
- python - io.UnsupportedOperation:在a+模式下不可读
- python - 解决没有列表理解或循环的返回函数?
- sql - 如何“检测” SQL 列中值的变化?
- javascript - 如何在 JavaScript 中按日期范围过滤来自 API 的 JSON 数据
- adb - 机器人框架指南
- python - 从机器人文件调用的 Python POST 请求抛出 400
- python-3.x - Flask 端点在线程化时未在 Google Cloud 存储上上传文件
- flutter - 在颤振/飞镖中循环类型
- python - 如何在 TwinCAT3 中将字节数组转换为各种 LREAL(double) 值
- lightweight-charts - 当图表很小时,无法在轻量级图表上显示所有数据,这是预期的吗?