Source

scruffy-cropper / cropper / templates / cropper / crop.html

{% load thumbnails %}
<html>
<head>
    <title>An Example jCrop Template</title>
</head>

    <style type="text/css">
        @import url('{{ STATIC_URL }}jcrop/css/jquery.Jcrop.css');
    </style>
<body>
    <h1>Crop Image</h1>
    <p>This is an example. Obviously, you'll want to write your own so it fits your site's style and structure.</p>

    <form class="form" enctype="multipart/form-data" action="." method="post">
        {% csrf_token %}
        <div class="section">
            <img id="crop-img" class="cover" src="{% thumbnail form.image 640x640 %}">
            {{ form.as_p }}
        </div>
        <div class="section controls">
            <input class="button" name="save" type="submit" value="Save Crop" default>
            
            {% if coordinates %}            
                <input class="button" type="submit" name="delete" value="Remove Copy">
            {% endif %}

        </div>
    </form>
    

    <script src="{{ STATIC_URL }}jcrop/js/jquery.Jcrop.js" type="text/javascript"></script>
    <script src="{{ STATIC_URL }}jcrop/js/jquery.color.js" type="text/javascript"></script>
    <script type="text/javascript">

        var DjangoCropper = function(){

            var image = $('#crop-img');
            var img_dimensions = [{{ form.image.width }}, {{ form.image.height }}];
            
            var _unconvert_crop = function(string_coords){
                // Convert PIL coordinates into jcrop coordinates
                // PIL wants the x,y of the top left corner, width and height.
                // jCrop wants the x,y of the top left corner and the bottom right corner.
                var crop = string_coords.split(',')
                for (var i = crop.length - 1; i >= 0; i--) {
                    crop[i] = parseFloat(crop[i]);
                };

                proportion = image.width() / img_dimensions[0];
                for (var i = crop.length - 1; i >= 0; i--) {
                    crop[i] = Math.round(crop[i] * proportion);
                };

                return crop
            };

            var record_args = function(coords){

                // Get Proportion
                proportion = img_dimensions[0] / image.width();

                // Set Crop
                var crop = [coords.x, coords.y, coords.x2, coords.y2];
                for (var i = crop.length - 1; i >= 0; i--) {
                    crop[i] = Math.round(crop[i] * proportion);
                };

                var crop = [coords.x, coords.y, coords.x + coords.w, coords.y + coords.h];

                var _scale_and_round = function(arg){
                    return Math.round(arg * proportion);
                };

                for (var i = crop.length - 1; i >= 0; i--) {
                    crop[i] = [_scale_and_round(crop[i])];
                };

                $('#id_crop').val(crop);

            };

            // It's very important that this is deferred until media is loaded
            $(window).load(function () {
                image.Jcrop({
                    {% if coordinates %}setSelect: _unconvert_crop("{{ coordinates }}"),{% endif %}
                    onChange: record_args,
                    onSelect: record_args
                });
            });


            return {}
        }();
    </script>
</body>
</html>