CODEWITHSUNDEEP
javascriptjqueryasp.net-mvcjquery-pluginsjcrop
1110
1110

Reputation: 6829

JCrop doesn't save selection when image size is changed

I am using jcrop for the first time. ANd I have a problem with image size and cropping. When user upload image 1366x768 or larger I preview it on my page. I also have crop selection preview and it works fine. When I submit positions it crops fine (it's when I use original image size).
But I don't want to display so large original images on page. User must see original image, preview and submit buttons in one view. So I need to make image smaller if image is 1366x768 I wan't to display it like 683x368. But here is the problem. When I set width and height on image tag crop not works fine anymore. I paste my code and image preview of my problem:

jQuery(window).load(function () {

            jQuery('#cropbox').Jcrop({
                onChange: showPreview,
                onSelect: showPreview,
                setSelect: [0, 0, 540, 300],
                allowResize: true, 
                 aspectRatio: 2
            });

        });

        function showPreview(coords) {
            if (parseInt(coords.w) > 0) {
                var rx = 540 / coords.w;
                var ry = 300 / coords.h;

                jQuery('#preview').css({
                    width: Math.round(rx * 683) + 'px',
                    height: Math.round(ry * 368) + 'px',
                    marginLeft: '-' + Math.round(rx * coords.x) + 'px',
                    marginTop: '-' + Math.round(ry * coords.y) + 'px'
                });
            }

            $('#x').val(coords.x);
            $('#y').val(coords.y);
            $('#w').val(coords.w);
            $('#h').val(coords.h);
        }

        </script>
</head>
<body>
    <div>        
        <p style="width: 540px; height: 300px; overflow: hidden; float:left;">
            <img id="preview" src="../../Content/Images/Full/Leopard.jpg" />
        </p>
        <p style="float:left;">
            <img id="cropbox" width="683px" height="368px" src="../../Content/Images/Full/Leopard.jpg" />
        </p>

        <p>
            @using (@Html.BeginForm("PostPicture", "Home"))
            {
                <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" />
                <button type="submit">
                    Send</button> 
            }
        </p>

enter image description here

This is second error: After I multiply X and Y with 2. enter image description here

This is asp.net back end code:

public ImageResult PostPicture(int x, int y, int h, int w)
        {            
            x = x * 2;
            y = y * 2;

            Image image = Image.FromFile(Path.Combine(this.Request.PhysicalApplicationPath, "Content\\Images\\Full\\Leopard.jpg"));
            Bitmap cropedImage = new Bitmap(w, h, image.PixelFormat);
            Graphics g = Graphics.FromImage(cropedImage);

            Rectangle rec = new Rectangle(0, 0,
                                w,
                                h);

            g.DrawImage(image, rec, x, y, w, h, GraphicsUnit.Pixel);
            image.Dispose();
            g.Dispose();

            string savedFileName = Path.Combine(
                   AppDomain.CurrentDomain.BaseDirectory,
                   "Content", "Images", "Full",
                   Path.GetFileName("cropped.jpg"));

            cropedImage.Save(savedFileName);

            return new ImageResult { Image = cropedImage, ImageFormat = ImageFormat.Jpeg };
        }

Upvotes: 0

Views: 3794

Answers (2)

malificent
malificent

Reputation: 1441

You'll have to adjust the crop coordinates that are passed. You need to adjust them according to the ratio by which you resized your image for preview. So if you shrank your image preview to 50% of what it was originally, the actual coordinates of the crop will be twice what they come in as or (x*2, y*2).

Upvotes: 1

Kekoa
Kekoa

Reputation: 28250

Maybe try setting the image size in css style attribute:

<img id="cropbox" style="width:683px;height:368px" src="../../Content/Images/Full/Leopard.jpg" />

Perhaps a better solution is to resize the image on the server to your desired dimensions, then display the resized image to the user instead of the full original image. This will also reduce download time for the browser since the image will be smaller.

Upvotes: 1

Related Questions