Ajax XMLhttprequest 发布到 PHP 脚本并旋转图像答案

【问题标题】：Ajax XMLhttprequest Post to PHP script and Rotate ImageAjax XMLhttprequest 发布到 PHP 脚本并旋转图像
【发布时间】：2021-11-08 17:41:09
【问题描述】：

我知道我在哪里遇到了大问题，但我似乎无法解决它们。我正在尝试通过 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>

【问题讨论】：

如果不了解预期的策略就很难说。试着问自己两个问题 (1) PHP 脚本返回给客户端的是什么？（2）... .innerHTML = this.responseText 是正确的做法吗？
好吧，我想出了这部分：xhttp.send("image="+);
只需要重新加载页面上的图像，而不需要重新加载页面以反映旋转后的图像。

标签： php jquery ajax xmlhttprequest rotation

【解决方案1】：

在这个问题中，不知道最初声明的$filename 是在哪里以及如何派生的，或者特定的文件夹结构/服务器配置是什么，因此以下可能需要调整以适应您的环境，因为我的测试站点使用了站点之外的别名文件夹根...无论如何 - 使用 Ajax（或此处的 Fetch api）向 PHP 发送文件名/文件路径很容易。 PHP 脚本做了它应该做的事情，除了它不返回一个值，但是当 ajax 请求完成时强制浏览器使用"reload" 图像的技巧是附加一个缓存破坏时间戳。

据说可以在Fetch 请求上设置的cache:'reload' 属性将确保图像不被缓存，但我发现这在这种情况下没有效果。

<?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>

【讨论】：

变量 $fileName 是通过用户在上一页填写的表单处理和上传后我尝试旋转的图像的相对路径。我遇到的问题是，在处理图像后，当照片从 iPad 纵向拍摄时，它似乎顺时针旋转 90 度，而从 Android 设备拍摄纵向时，它似乎顺时针旋转 90 度。结果是上传后的个人资料照片的方向可能无法预测。这看起来像我所追求的。我会试一试。谢谢。除非你有其他建议？
我相信这是 iPhone/iPad 图片常见的现象......我相信有一种常见的处理方法，但不记得它是什么。有了上述内容，您可能需要分析控制台以查看并响应任何错误消息 - 如果路径不正确等，PHP 会抱怨，但是一旦您对路径进行了排序，这应该没问题 - 无论如何在测试中都可以正常工作。祝你好运
它有效，伙计！非常感谢！
如果有帮助，您可能希望接受答案
罗杰。再次感谢。