问题描述:

this is my code for image upload now i want to crop selected image.

pls help me to crop selected image.

my max dimention for croping is 145X190 px

my code for image uploading is

This:

 <!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>jQuery UI Tooltip - Default functionality</title>

<script src="http://deepliquid.com/projects/Jcrop/js/jquery.min.js"></script>

<script src="http://deepliquid.com/projects/Jcrop/js/jquery.Jcrop.js"></script>

<link rel="stylesheet" href="http://deepliquid.com/projects/Jcrop/css/jquery.Jcrop.css" type="text/css" />

<link rel="stylesheet" href="http://deepliquid.com/projects/Jcrop/demos/demo_files/demos.css" type="text/css" />

<script src="http://code.jquery.com/jquery-1.9.1.js"></script>

<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>

<link rel="stylesheet" href="/resources/demos/style.css">

<script >

$(function () {

function readImage(file) {

var reader = new FileReader();

var image = new Image();

var maxw = 600;

var maxh = 600;

reader.readAsDataURL(file);

reader.onload = function (_file) {

image.src = _file.target.result; // url.createObjectURL(file);

image.onload = function () {

var w = this.width,

h = this.height,

t = file.type, // ext only: // file.type.split('/')[1],

n = file.name,

s = ~~ (file.size / 1024) + 'KB';

if ( h > maxh || w > maxw) {

alert("Height and width is bigger then over max criteria pls select image max height and width =2024X2024");

alert(w);

alert(h);

} else {

alert(w);

alert(h);

$('#uploadPreview').html('<img src="' + this.src + '"> ' + w + 'x' + h + ' ' + s + ' ' + t + ' ' + n + '<br>');

}

};

image.onerror = function () {

alert('Invalid file type: ' + file.type);

};

};

}

$("#choose").change(function (e) {

if (this.disabled) return alert('File upload not supported!');

var F = this.files;

if (F && F[0]) for (var i = 0; i < F.length; i++) readImage(F[i]);

});

$(function(){

$('image.src').Jcrop({

onChange: showPreview,

onSelect: showPreview,

aspectRatio: 1

});

});

function showPreview(coords)

{

var rx = 100 / coords.w;

var ry = 100 / coords.h;

$('#uploadPreview1').css({

width: Math.round(rx * 500) + 'px',

height: Math.round(ry * 370) + 'px',

marginLeft: '-' + Math.round(rx * coords.x) + 'px',

marginTop: '-' + Math.round(ry * coords.y) + 'px'

});

}

});

</script>

<style>

</style>

</head>

<body >

<input type="file" id="choose" multiple="multiple" />

<br>

<div id="uploadPreview" ></div>

<div id="uploadPreview1" ></div>

</body>

</html>

Now i want crop the image.hope you understand my code.

网友答案:

You've already imported jquery.min, so you don't have to import "jquery-1.9.1.js" then. Beside that maybe you need to call Jcrop just after you created the image tag. I did the modification to your code and I was able to crop the uploaded image.

<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8">
<title>jQuery UI Tooltip - Default functionality</title>
<script src="http://deepliquid.com/projects/Jcrop/js/jquery.min.js"></script>
        <script src="http://deepliquid.com/projects/Jcrop/js/jquery.Jcrop.js"></script>
        <link rel="stylesheet" href="http://deepliquid.com/projects/Jcrop/css/jquery.Jcrop.css" type="text/css" />
        <link rel="stylesheet" href="http://deepliquid.com/projects/Jcrop/demos/demo_files/demos.css" type="text/css" />
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">
<script >
$(function () { 
function readImage(file) {

    var reader = new FileReader();
    var image = new Image();
    var maxw = 600;
    var maxh = 600;

    reader.readAsDataURL(file);
    reader.onload = function (_file) {
        image.src = _file.target.result; // url.createObjectURL(file);
        image.onload = function () {
            var w = this.width,
                h = this.height,
                t = file.type, // ext only: // file.type.split('/')[1],
                n = file.name,
                s = ~~ (file.size / 1024) + 'KB';
            if (  h > maxh || w > maxw) {
                alert("Height and width is bigger then over max criteria pls select image max height and width                                            =2024X2024");
                alert(w);
                alert(h);
            } else {
                alert(w);
                alert(h);
                $('#uploadPreview').html('<img  id="myImage" src="' + this.src + '"> ' + w + 'x' + h + ' ' + s + ' ' + t + ' ' + n + '<br>');
                $('#myImage').Jcrop({
                    onChange: showPreview,
                    onSelect: showPreview,
                    aspectRatio: 1
                });
            }

        };
        image.onerror = function () {
            alert('Invalid file type: ' + file.type);
        };
    };

}

$("#choose").change(function (e) {
    if (this.disabled) return alert('File upload not supported!');
    var F = this.files;
    if (F && F[0]) for (var i = 0; i < F.length; i++) readImage(F[i]);
});


function showPreview(coords)
{
    var rx = 100 / coords.w;
    var ry = 100 / coords.h;

    $('#uploadPreview1').css({
        width: Math.round(rx * 500) + 'px',
        height: Math.round(ry * 370) + 'px',
        marginLeft: '-' + Math.round(rx * coords.x) + 'px',
        marginTop: '-' + Math.round(ry * coords.y) + 'px'
    });
}

});




</script>



<style>



</style>
</head>
<body >
<input type="file" id="choose" multiple="multiple"   />
<br>
<div id="uploadPreview" ></div>
<div id="uploadPreview1" ></div>


</body>
</html>
网友答案:

Though I have not understood your full code but it looks like you have not implemented the crop functionality. Correct me if I am wrong there. But to implement crop you can use Jcrop plugin from JQuery.

Let me know if I have misunderstood your query.

相关阅读:
Top