Question

所以我目前正在使用此http://www.w3bees.com/2013/08/image-upload-and-crop-with-jquery-and.html 我只是根据我的需要调整了一下。

问题：我似乎无法根据选择获得作物，例如，如果我有一张1920px×1080px的照片，我想裁剪照片的中间说高度为200px和一个自动宽度，因为我正在裁剪宽高比为“1.33：1”。但是一旦我提交了作物，就会在左上角进行裁剪，我什么也看不到。一旦我裁剪了照片，它就会被转换为408px的宽度，高度为303px。我想知道我能做什么，以便任何照片上的裁剪都是完美的，并根据选择。

HTML代码：

    <img id="uploadPreview" style="display:none;"/>

    <!-- image uploading form -->
    <form action="upload.php" method="post" enctype="multipart/form-data">
        <input id="uploadImage" type="file" accept="image/jpeg" name="image" />
        <input type="submit" value="Upload">

        <!-- hidden inputs -->
        <input type="hidden" id="x" name="x" />
        <input type="hidden" id="y" name="y" />
        <input type="hidden" id="w" name="w" />
        <input type="hidden" id="h" name="h" />
    </form>

CSS代码：

img {
    max-width: 1000px;
}
img#uploadPreview{
    border: 0;
    border-radius: 3px;
    -webkit-box-shadow: 0px 2px 7px 0px rgba(0, 0, 0, .27);
    box-shadow: 0px 2px 7px 0px rgba(0, 0, 0, .27);
    margin-bottom: 30px;
    max-width: 1000px;
}

Jquery代码：

$(document).ready(function () {
    var p = $("#uploadPreview");
    // prepare instant preview
    $("#uploadImage").change(function () {
        // fadeOut or hide preview
        p.fadeOut();
        $("#photowrapp").css("margin-top", "7px");
        // prepare HTML5 FileReader
        var oFReader = new FileReader();
        oFReader.readAsDataURL(document.getElementById("uploadImage").files[0]);
        oFReader.onload = function (oFREvent) {
            var image = new Image();
            image.src = oFREvent.target.result;
            image.onload = function () {
                if ((this.width >= 4500) || (this.height >= 4500)) {
                    alert("Picture Has to Be Lower Than 4500 by 4500");
                }
                else {
                    p.attr('src', oFREvent.target.result).fadeIn();
                }
                // access image size here & do further implementation
            };
        };
    });
    // implement imgAreaSelect plug in (http://odyniec.net/projects/imgareaselect/)
    $('img#uploadPreview').imgAreaSelect({
        // set crop ratio (optional)
        aspectRatio: '1.33:1',
        onSelectEnd: setInfo,
    });
});

PHP代码：

$valid_exts = array('jpeg', 'jpg', 'png', 'gif');
$max_file_size = 1024*1024; 
$nw = 408;
$nh = 303; # image width # height
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
    if ( isset($_FILES['image']) ) {
        if (! $_FILES['image']['error'] && $_FILES['image']['size'] < $max_file_size) {
            $ext = strtolower(pathinfo($_FILES['image']['name'], PATHINFO_EXTENSION));
            if (in_array($ext, $valid_exts)) {
                    if (!file_exists('photos/' )) {
                        mkdir('photos/' , 0777, true);
                        }
                    $path = 'photos/' . uniqid() . '.' . $ext;
                    $size = getimagesize($_FILES['image']['tmp_name']);

                    $x = (int) $_POST['x'];
                    $y = (int) $_POST['y'];
                    $w = (int) $_POST['w'] ? $_POST['w'] : $size[0];
                    $h = (int) $_POST['h'] ? $_POST['h'] : $size[1];

                    $data = file_get_contents($_FILES['image']['tmp_name']);
                    $vImg = imagecreatefromstring($data);
                    $dstImg = imagecreatetruecolor($nw, $nh);
                    imagecopyresampled($dstImg, $vImg, 0, 0, $x, $y, $nw, $nh, $w, $h);
                    imagejpeg($dstImg, $path, 100);
                    imagedestroy($dstImg);

                    header("Location: photos.php");


                } else {
                    echo 'unknown problem!';
                } 
        } else {
            echo 'file is too small or large';
        }
    } else {
        echo 'file not set';
    }
}

感谢阅读！

无法根据选择裁剪大图像

0 个答案: