I want to crop, rotate, skew an image with a frame above it; is it possible using jQuery?_问答_开发者

I am developing an application where a user uploads an image and zooms, pans to set the image into the frame.

I am able to pan and zoom, and have set the face on the frame (the blank/transparent face). The user is also able to view the image.

What I finally want to do is to save a final image of the face which the user has selected, but the image should be a single image which consists of the Frame + User's face - the area outside the visible facial are.

The problem which I am facing is that I am not able to remove the part of the image which I don't want.

Please suggest me ways I can do the same. Examples would be great but they should be implemented in jQuery/JavaScript.

Screenshot:

I want to crop, rotate, skew an image with a frame above it; is it possible using jQuery?

The code is given below:

<html>
<head>
    <script src="file/ga.js" type="text/javascript"></script>
    <script src="file/jquery.js" type="text/javascript"></script>
    <script src="file/jquery-ui.js" type="text/javascript"></script>
    <script src="file/jquery_002.js" type="text/javascript"></script>
    <script src="file/axzoomer.js" type="text/javascript"></script>

    <script type="text/javascript">

    function adjustMe()
    {
        document.getElementById('layer1').style.z-index = -9999999;
    }

    </script>
</head>

    <div style="width: 100%;">
        <div style="position: relative; left: 0px; t开发者_StackOverflowop: 0px; width: 360px; height: 270px;">

            <div style="width:400px;height:400px; background-image:url('frame.png')">
            </div>  

            <!--* frame comes above */-->


            <div id="layer1" style="position: absolute; left: 30px; top: 40px; width: 360px; height: 270px;">
                <img id="dyn" class="ex ax-zoom" src="peng.jpg" style="width: 360px;opacity: 0.2;filter:alpha(opacity=30); height: 270px; position: absolute; top: 0px; left: 0px;"/>
            </div>
                <div style="display: none; position: absolute; opacity: 0.5; height: 35px; top: 240px; left: 148px;" class="ax-controls">
                    <img style="cursor: pointer;" src="file/zoom-in.png">
                    <img style="cursor: pointer;" src="file/zoom-out.png">

                </div>



        </div>
    </div>

    <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
    <div style="clear:both;">
        <input type="button" value="Done" onclick="adjustMe();"/>
    </div>
    <script type="text/javascript">
    $('.ex').axzoomer({
        'maxZoom':4,
        'zoomIn':'file/zoom-in.png',
        'zoomOut':'file/zoom-out.png',
        'opacity':0.5,
        'sensivity':10
    });


    </script>
</body>

You can't actually modify/save the image in javascript/jquery (as far as i know). You'll have to use server-side image manipulation libraries like gdlib (http://www.boutell.com/gd/) which is usually activated by default in php, or imagemagick (http://www.imagemagick.org/script/index.php)

You should try to get the new coordinates of the panned image and pass it to the server side and do the server side image manipulation. If you are using python, you will use PIL to manipulate the image and store it in the database. Only thing you should pass is the new coordinates of the panned image to the server side.

adding some option to axzoomer (i planing to extend plugin functionality) to get current dimension and view coordinates of the image, you can do image crop by using server side option. You have already the image in the server side, so you can resize it on server by sending to server only the dimensions (for resizing) and coordinates (for then cropping) with an ajax request, and after this generate a new image in base64 string if send directly by ajax return xmlresponse or save it in a fixed file and then send on xmlresponse the url of file. In this way you will have on the fly the crop image. Another way maybe using canvas. AlbanX

It is not possible to do image processing with jQuery/javascript. You have to involve the server into this.

I have done such work in asp.net. My method consisted of following steps

Upload the image to server
show the image for pan/zoom
when user done setting,
1. get the visible image dimensions
2. post the dimension to server
server will receive the new rectangle points and will crop the image (bitmap,graphics classes in GDI+ in dot net framework)
Merge a frame with cropped image. (Graphics class in GDI+ in dot net framework)

You can't manipulate the Image file using Javascript It needs the involvement of the Server Side Script The best way to achieve what you need (Using Jquery as Client Side and PHP as Server Side language) you have to use the Jcrop Plugin this is the best Plugin for Cropping the Image and They also have one example in their source with the demo of Image Cropping with Jcrop and PHP. Try Going to Jcrop Official website. The Example of Cropping with Serverside Script is Here.