Question

我知道这是一个主题多次，但显示的示例与我的代码不对应。

我必须裁剪图像以用作个人资料图片。为此，请使用这些页面。

的index.php

<!doctype html>
<html>
<head lang="en">
<meta charset="utf-8">
<title>jQuery Image Crop</title>
<link rel="stylesheet" type="text/css" href="css/imgareaselect-animated.css" />
<!-- scripts -->
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.imgareaselect.pack.js"></script>
<script type="text/javascript" src="js/script.js"></script>
<style>
            .wrap{
    width: 700px;
    margin: 10px auto;
    padding: 10px 15px;
    background: white;
    border: 2px solid #DBDBDB;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    text-align: center;
    overflow: hidden;
}
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;
    overflow: hidden;
}
    </style>
    </head>
    <body>
    <div class="wrap">
<!-- image preview area-->
<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>
    </div><!--wrap-->
    </body>
    </html>

upload.php的

<?php
$valid_exts = array('jpeg', 'jpg', 'png', 'gif');
$max_file_size = 4 * 1024 * 1024; # 4 MB
$nw = $nh = 100; # image with # 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)) {
                $path = 'uploads/' . 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);
                imagedestroy($dstImg);
                echo "<img src='$path' />";

            } else {
                echo 'problema sconosciuto!';
            } 
    } else {
        echo 'file troppo piccolo o troppo grande';
    }
} else {
    echo 'file non selezionato';
}
} else {
echo 'richiesta non valida!';
}

?>

和script.js

function setInfo(i, e) {
$('#x').val(e.x1);
$('#y').val(e.y1);
$('#w').val(e.width);
$('#h').val(e.height);
}

$(document).ready(function() {
var p = $("#uploadPreview");

// prepare instant preview
$("#uploadImage").change(function(){
    // fadeOut or hide preview
    p.fadeOut();

    // prepare HTML5 FileReader
    var oFReader = new FileReader();
    oFReader.readAsDataURL(document.getElementById("uploadImage").files[0]);

    oFReader.onload = function (oFREvent) {
        p.attr('src', oFREvent.target.result).fadeIn();
    };
});

// implement imgAreaSelect plug in (http://odyniec.net/projects/imgareaselect/)
$('img#uploadPreview').imgAreaSelect({
    // set crop ratio (optional)
    aspectRatio: '1:1',
    onSelectEnd: setInfo
});
});

问题在于，例如，如果您加载的图像为1366x768像素，则会以原始大小显示，因此无法进行裁剪。如何调整预览的大小？

我已经尝试过设置index.php

<img id='uploadPreview' style='display:none;' width='600' />

显然它有效，但裁剪后的图像与所选区域不匹配。

使用jquery的大尺寸图像的问题

0 个答案: