Question

我正在尝试允许用户上传任意高度/宽度的图像，然后在我的页面上将该图像裁剪为400 x 400平方。我试图这样做的方法是获取上传图像的URL，通过GET将其发送到我的PHP脚本，然后将新的img标签添加到包含调整大小的图像的DOM中。

我遇到的麻烦是即使使用imagecopyresampled（），裁剪后的图像也总是黑色。这是一个实时example。

我的HTML：

<!DOCTYPE html>
<html>
    <head>
        <meta name='viewport' content='width=device-width,initial-scale=1,minimum-scale=1'>

        <title>Test</title>

        <!-- styles -->
        <link rel="stylesheet"    href="http://code.jquery.com/ui/1.11.0/themes/smoothness/jquery-ui.css">

        <!-- scripts -->
        <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
        <script src='js/script.js'></script>
    </head>

    <body>
        <label for='existing'>Choose existing photo:</label>
            <input id="existing" type="file" accept="image/*">


        <div id="photo_container">
            <img id="photo" src="" width="640" height="480">
        </div>
    </body>
</html>

MY JS：

    $(document).ready(
    function()
    {   
        var showPicture = document.querySelector("#photo");
        var takePicture = document.querySelector("#existing");

        takePicture.onchange = function( event )
        {
            var files = event.target.files, file;

            if (files && files.length > 0) 
            {
                file = files[0];
            }

            try 
            {
                var URL = window.URL || window.webkitURL;
                var imgURL = URL.createObjectURL(file);

                showPicture.src = imgURL;

                $('#photo_container').append('<img id="photo_new" src="http://andrewtgibsongraphics.com/upload_test/crop.php?source='+imgURL+'"/>');

            }

            catch(e) 
            {
                try 
                {
                    var fileReader = new FileReader();

                    fileReader.onload = function (event) 
                    {

                        showPicture.src = event.target.result;

                        $('#photo_container').append('<img id="photo_new" src="http://andrewtgibsongraphics.com/upload_test/crop.php?source='+imgURL+'"/>');
                    };

                    fileReader.readAsDataURL(file);
                }

                catch(e) 
                {

                    var error = document.querySelector("#error");

                    if (error) 
                    {
                        error.innerHTML = "Neither createObjectURL or FileReader are supported";
                    }
                }
            }
        }; 
    });

我的PHP：

    $source = $_GET['source'];

    header('Content-type: image/jpeg');

    list($width, $height) = getimagesize($source);

    $myImage = imagecreatefromjpeg($source);
    $newImage = imagecreatetruecolor(400,400);

    imagecopyresampled($newImage, $myImage, 0, 0, 0, 0, 400, 400, $width, $height);

    imagejpeg($newImage);

    imagedestroy($newImage);
    imagedestroy($myImage);

Answer 1

URL.createObjectURL method创建一个临时URL，供浏览器中使用的文件尚未实际上传。因此，此URL对于在远程服务器上运行的PHP代码完全没有意义。

MDN有a quite thorough tutorial of the API you are using here，讨论如何在上传图像之前显示图像，以及如何异步上传图像。

我不能用GD操纵上传的图像

1 个答案: