cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - ActiveLovehtmlicon-new-collectionicon-personicon-teamlog-outoctocatpop-outspinnerstartv

Pen Settings

CSS Base

Vendor Prefixing

Add External CSS

These stylesheets will be added in this order and before the code you write in the CSS editor. You can also add another Pen here, and it will pull the CSS from it. Try typing "font" or "ribbon" below.

Quick-add: + add another resource

Add External JavaScript

These scripts will run in this order and before the code in the JavaScript editor. You can also link to another Pen here, and it will run the JavaScript from it. Also try typing the name of any popular library.

Quick-add: + add another resource

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

            
              <html>
<head>
    <meta charset="UTF-8">
    <title>Photo Uploader and Preview</title>
    
    <link rel="stylesheet" type="text/css" href="style.css" />
</head>

<body>
    <div id="upload_photo_page_inner"></div>
</body>
</html>
            
          
!
            
              @charset "UTF-8";

body {
    overflow-x: hidden;
}

#crop_photo_svg {
    margin-left: 18px;
}

.photo_upload_tool {
    float: left;
    margin-left: 4px;
    margin-right: 4px;
    width: 24px;
}

#upload_photo_canvas {
    background-color: rgb(68,68,68);
}

#upload_photo_div {
    margin-bottom: 68px;
}

#upload_photo_footer {
    margin-left: 10px;
    margin-top: -54px
}

#upload_photo_footer_left {
    float: left;
}

#upload_photo_footer_right {
    float: right;
}

#upload_photo_div {
    font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Verdana, sans-serif;
}

#upload_photo_help {
    height: 30px;
    position: absolute;
    visibility: hidden;
    width: 100%;
    z-index: 99999;
}

#upload_photo_help_inner {
    background-color: rgba(255,255,255,0.8);
    border-radius: 5px;
    margin: auto;
    padding: 4px;
    text-align: center;
    width: 220px;
}

#upload_photo_page_inner {
    max-width: 650px;
}

#upload_photo_tools {
    height: 26px;
    margin-bottom: 12px;
    width: 100%;
}

.upload_svg_icon {
    cursor: pointer;
    opacity: 1;
    fill: #000000;
    fill-opacity: 1;
    fill-rule: evenodd;
    stroke: none;
}

.upload_svg_icon_inactive {
    cursor: auto;
    opacity: 1;
    fill: #BBB;
    fill-opacity: 1;
    fill-rule: evenodd;
    stroke: none;
}

.upload_svg_icon_selected {
    cursor: pointer;
    opacity: 1;
    fill: #00bbe0;
    fill-opacity: 1;
    fill-rule: evenodd;
    stroke: none;
}
            
          
!
            
              function UPLOAD_PREVIEW(object_id) {
    this._canvas_id = "upload_photo_canvas";
    this._crop_path = {};
    this._image_crop = false;
    this._image_selected = false;
    this._object_id = object_id;
    this._paper_scope = {};
    this._upload_image_raster;
    
    this._crop_mask_adjust = {
        left:   false,
        right:  false,
        top:    false,
        bottom: false,
        move:   false,
        
        reset: function() {
            this.left = false;
            this.right = false;
            this.top = false;
            this.bottom = false;
            this.move = false;
        }
    };
    
    /* Public */
    this.resize_mouse_margin = 30;
    this.upload_photo = function (data_url) {};
};

UPLOAD_PREVIEW.prototype.init = function(object_id) {
    this._build_objects(object_id);
    this.resize_canvas();
    
    var up_obj = this;
    paper.install(window);
    
    this.canvas = document.getElementById(this._canvas_id);
    this._object_id  = object_id;
    this._paper_scope = new paper.PaperScope();
    
    this._paper_scope.setup(this.canvas);
    paper = this._paper_scope;
    
    /* Add listeners */
    document.getElementById("input_upload_image").addEventListener("change", function(event) {
        up_obj.draw(up_obj, event);
    });
    
    document.getElementById("crop_photo_svg").addEventListener("click", function(event) {
        up_obj.crop_button(up_obj);
    });
    
    document.getElementById("photo_upload_ok_svg").addEventListener("click", function(event) {
        up_obj.ok_button();
    });
    
    document.getElementById("rotate_ccw_svg").addEventListener("click", function(event) {
        up_obj.rotate_ccw(up_obj);
    });

    document.getElementById("rotate_cw_svg").addEventListener("click", function(event) {
        up_obj.rotate_cw(up_obj);
    });
    
    $("#" + this._canvas_id).mouseup(function(event) {
        up_obj._upload_photo_mouse_up(up_obj._crop_path);
    });
}

UPLOAD_PREVIEW.prototype._build_objects = function(parent_object) {
    var html_code = "<div id='upload_photo_div'><canvas id='upload_photo_canvas'></canvas><div id='upload_photo_help'><div id='upload_photo_help_inner'></div></div></div><div id='upload_photo_footer'><div id='upload_photo_footer_left'><div id='upload_photo_tools'><div class='photo_upload_tool' id='rotate_ccw_div'></div><div class='photo_upload_tool' id='rotate_cw_div'></div><div class='photo_upload_tool' id='crop_photo_div'></div></div><div><input type='file' name='img' size='65' id='input_upload_image' /></div></div><div id='upload_photo_footer_right'></div></div>";
    
    var crop_svg_code = "<svg width='24' height='24' id='crop_photo_svg' class='upload_svg_icon_inactive' role='img' aria-label='Crop Photo'><title>Crop Photo</title><g transform='translate(0,-1028.3623)'><g transform='matrix(0.9610391,0,0,0.95932488,0.02098112,42.272408)'><path d='m 4.5000003,1038.1417 0,-9.7206 1.7253069,0 1.7253069,0 0,7.9952 0,7.9954 8.5002929,0 8.500292,0 0,1.7253 0,1.7253 -10.225599,0 -10.2255997,0 0,-9.7206 z' /><path transform='translate(0,1028.3623)' d='m 0.04524562,6.2919835 0,-1.7104718 1.71047178,0 1.7104717,0 0,1.7104718 0,1.7104717 -1.7104717,0 -1.71047178,0 0,-1.7104717 z' /><path transform='translate(0,1028.3623)' d='m 17.015808,11.524015 0,-3.5215598 -4.024639,0 -4.0246394,0 0,-1.7104717 0,-1.7104718 5.7351114,0 5.735111,0 0,5.2320312 0,5.2320311 -1.710472,0 -1.710472,0 0,-3.521559 z' /><path transform='translate(0,1028.3623)' d='m 17.015808,22.256386 0,-1.710471 1.710472,0 1.710472,0 0,1.710471 0,1.710472 -1.710472,0 -1.710472,0 0,-1.710472 z' /></g></g></svg>";
    
    var ok_svg_code = "<svg width='50' height='50' class='upload_svg_icon_inactive' id='photo_upload_ok_svg' role='img' aria-label='OK'><title>OK</title><g transform='matrix(0.51371618,0,0,0.51564698,-0.51380477,-0.45516914)'><path d='m 96.915,6.877 c -1.656,-1.52 -4.375,-1.536 -6.062,0 L 31.845,61.496 6.993,52.295 C 5.085,51.62 2.907,52.326 1.81,53.931 0.644,55.587 0.745,57.814 2.062,59.386 L 29.33,91.413 C 30.19,92.409 31.424,93 32.722,93 l 0.473,-0.019 c 1.216,-0.133 2.347,-0.758 3.073,-1.703 L 97.387,12.904 c 1.419,-1.823 1.217,-4.473 -0.472,-6.027 z m -64.193,84.636 0,0.019 0,0 0,-0.019 z' /></g></svg>"
    
    var rotate_ccw_svg_code = "<svg width='24' height='24' id='rotate_ccw_svg' class='upload_svg_icon_inactive' role='img' aria-label='Rotate Counterclockwise'><title>Rotate Counterclockwise</title><g transform='translate(0,-1028.3622)'><g transform='matrix(0.24444449,0,0,0.24444449,-0.22222835,795.34027)'><path d='m 94.90615,1008.808 c 0.341194,-3.081 -0.285137,-9.59132 -1.27719,-13.27554 l -0.539794,-2.00462 -3.952634,1.32895 c -2.980464,1.00211 -3.879175,1.52038 -3.653984,2.10724 0.696794,1.81581 1.435197,8.42527 1.224764,10.96287 l -0.227826,2.7473 2.004901,0.2927 c 1.102693,0.1609 2.922726,0.427 4.044524,0.5912 l 2.039623,0.2985 0.337616,-3.0486 z' /><path d='m 84.272605,1033.9284 c 3.603849,-3.989 8.121251,-11.6342 7.622435,-12.9001 -0.224953,-0.5709 -7.114409,-3.2839 -7.328347,-2.8858 -0.0558,0.1038 -0.690737,1.3662 -1.411001,2.8053 -0.720263,1.4391 -2.457419,4.1192 -3.860351,5.9557 l -2.550771,3.3392 2.852171,2.8522 2.85217,2.8521 1.823694,-2.0186 z' /><path d='m 62.187762,1046.5855 c 3.594722,-0.7793 9.429015,-2.9354 11.431002,-4.2245 l 1.201552,-0.7736 -1.673009,-2.9849 c -0.92016,-1.6417 -1.862607,-3.1981 -2.094322,-3.4587 -0.243455,-0.2737 -1.923984,0.196 -3.981073,1.1128 -1.957877,0.8726 -4.384805,1.7516 -5.393172,1.9534 -3.858474,0.772 -3.666792,0.5086 -3.666792,5.0383 0,2.2855 0.176788,4.1366 0.392874,4.1137 0.216075,-0.023 1.918393,-0.3723 3.78294,-0.7765 z' /><path d='m 85.9181,987.24022 3.548155,-1.98959 -1.383599,-2.05561 C 82.206742,974.46523 72.988948,968.04109 63.173073,965.83484 l -4.113472,-0.92456 0,-3.77403 0,-3.77402 -9.893389,5.86458 c -5.441357,3.22551 -9.979014,6.04953 -10.083692,6.27559 -0.104656,0.22606 4.347365,3.10084 9.89339,6.3884 l 10.083691,5.97738 0,-4.22043 0,-4.22043 1.921225,0.36042 c 7.172166,1.34551 15.164119,6.8483 20.356151,14.01601 l 1.032967,1.42606 3.548156,-1.98959 z' /><rect transform='matrix(-0.68544978,0.72811991,0.72811991,0.68544978,0,0)' y='696.78491' x='691.34351' height='52.719765' width='41.522648' /></g></g></svg>";
    
    var rotate_cw_svg_code = "<svg width='24' height='24' id='rotate_cw_svg' class='upload_svg_icon_inactive' role='img' aria-label='Rotate Clockwise'><title>Rotate Clockwise</title><g transform='translate(0,-1028.3622)'><g transform='matrix(0.24444445,0,0,0.24444445,-0.22222452,795.34031)'><path d='m 5.093854,1008.808 c -0.3411939,-3.081 0.2851372,-9.59132 1.2771903,-13.27554 l 0.5397932,-2.00462 3.9526345,1.32895 c 2.980464,1.00211 3.879175,1.52038 3.653984,2.10724 -0.696794,1.81581 -1.435197,8.42527 -1.224764,10.96287 l 0.227826,2.7473 -2.004901,0.2927 c -1.102693,0.1609 -2.9227261,0.427 -4.0445237,0.5912 l -2.0396235,0.2985 -0.3376158,-3.0486 z' /><path d='m 15.727399,1033.9284 c -3.603849,-3.989 -8.121251,-11.6342 -7.6224346,-12.9001 0.2249527,-0.5709 7.1144086,-3.2839 7.3283466,-2.8858 0.0558,0.1038 0.690737,1.3662 1.411001,2.8053 0.720263,1.4391 2.457419,4.1192 3.860351,5.9557 l 2.550771,3.3392 -2.852171,2.8522 -2.85217,2.8521 -1.823694,-2.0186 z' /><path d='m 37.812242,1046.5855 c -3.594722,-0.7793 -9.429015,-2.9354 -11.431002,-4.2245 l -1.201552,-0.7736 1.673009,-2.9849 c 0.92016,-1.6417 1.862607,-3.1981 2.094322,-3.4587 0.243455,-0.2737 1.923984,0.196 3.981073,1.1128 1.957877,0.8726 4.384805,1.7516 5.393172,1.9534 3.858474,0.772 3.666792,0.5086 3.666792,5.0383 0,2.2855 -0.176788,4.1366 -0.392874,4.1137 -0.216075,-0.023 -1.918393,-0.3723 -3.78294,-0.7765 z' /><path d='m 14.081904,987.24022 -3.548155,-1.98959 1.383599,-2.05561 c 5.875914,-8.72979 15.093708,-15.15393 24.909583,-17.36018 l 4.113472,-0.92456 0,-3.77403 0,-3.77402 9.893389,5.86458 c 5.441357,3.22551 9.979014,6.04953 10.083692,6.27559 0.104656,0.22606 -4.347365,3.10084 -9.89339,6.3884 l -10.083691,5.97738 0,-4.22043 0,-4.22043 -1.921225,0.36042 c -7.172166,1.34551 -15.164119,6.8483 -20.356151,14.01601 l -1.032967,1.42606 -3.548156,-1.98959 z' /><rect transform='matrix(0.68544978,0.72811991,-0.72811991,0.68544978,0,0)' y='623.9729' x='759.88849' height='52.719765' width='41.522648' /></g></g></svg>";
    
    $("#" + parent_object).html(html_code);
    $("#crop_photo_div").html(crop_svg_code);
    $("#upload_photo_footer_right").html(ok_svg_code);
    $("#rotate_ccw_div").html(rotate_ccw_svg_code);
    $("#rotate_cw_div").html(rotate_cw_svg_code);
}

UPLOAD_PREVIEW.prototype._move_crop_mask  = function(crop_path, event) {
    if (this._crop_path.resize_click === true) {
        if (this._crop_mask_adjust.left === true) {
            if (this._crop_mask_adjust.move === true && crop_path.point_bounds.x2 == crop_path.image_bounds.right) {
                /* Don't Shrink the mask */
            } else {
                crop_path.point_bounds.x1 = crop_path.bounds.left + (event.point.x - crop_path.resize_click_start.x);
            }
            
            if (crop_path.point_bounds.x1 < crop_path.image_bounds.left) {
                crop_path.point_bounds.x1 = crop_path.image_bounds.left;
            }
        }
        
        if (this._crop_mask_adjust.right === true) {
            if (this._crop_mask_adjust.move === true && crop_path.point_bounds.x1 == crop_path.image_bounds.left) {
                /* Don't Shrink the mask */
            } else {
                crop_path.point_bounds.x2 = crop_path.bounds.right + (event.point.x - crop_path.resize_click_start.x);
            }
            
            if (crop_path.point_bounds.x2 > crop_path.image_bounds.right) {
                crop_path.point_bounds.x2 = crop_path.image_bounds.right;
            }
        }
        
        if (this._crop_mask_adjust.top === true) {
            if (this._crop_mask_adjust.move === true && crop_path.point_bounds.y2 == crop_path.image_bounds.bottom) {
                /* Don't Shrink the mask */
            } else {
                crop_path.point_bounds.y1 = crop_path.bounds.top + (event.point.y - crop_path.resize_click_start.y);
            }
            
            if (crop_path.point_bounds.y1 < crop_path.image_bounds.top) {
                crop_path.point_bounds.y1 = crop_path.image_bounds.top;
            }
        }
        
        if (this._crop_mask_adjust.bottom === true) {
            if (this._crop_mask_adjust.move === true && crop_path.point_bounds.y1 == crop_path.image_bounds.top) {
                /* Don't Shrink the mask */
            } else {
                crop_path.point_bounds.y2 = crop_path.bounds.bottom + (event.point.y - crop_path.resize_click_start.y);
            }
            
            if (crop_path.point_bounds.y2 > crop_path.image_bounds.bottom) {
                crop_path.point_bounds.y2 = crop_path.image_bounds.bottom;
            }
        }

        crop_path.removeSegments();
        crop_path.add({x: crop_path.point_bounds.x1, y: crop_path.point_bounds.y1}, {x: crop_path.point_bounds.x2, y: crop_path.point_bounds.y1});
        crop_path.add({x: crop_path.point_bounds.x2, y: crop_path.point_bounds.y1}, {x: crop_path.point_bounds.x2, y: crop_path.point_bounds.y2});
        crop_path.add({x: crop_path.point_bounds.x2, y: crop_path.point_bounds.y2}, {x: crop_path.point_bounds.x1, y: crop_path.point_bounds.y2});
        crop_path.add({x: crop_path.point_bounds.x1, y: crop_path.point_bounds.y2}, {x: crop_path.point_bounds.x1, y: crop_path.point_bounds.y1});
        
        crop_path.resize_click_start = event.point;
        this._paper_scope.view.draw();
    }
};

UPLOAD_PREVIEW.prototype._start_photo_crop  = function() {
    if (this._image_selected === true) {
        this._image_crop = true;
        $("#crop_photo_svg").attr('class', 'upload_svg_icon_selected');
    
        var img_rotation = Math.abs(Math.round(this._upload_image_raster.rotation));
        var photo_size = this._upload_image_raster.size;
        var crop_width = 0;
        var crop_height = 0;
        var up_obj = this;
        
        if (img_rotation == 90 || img_rotation == 270) {
            var crop_width = photo_size.height;
            var crop_height = photo_size.width;
            
            var point_bounds = {
                x1: this._paper_scope.view.center.x - (photo_size.height / 2),
                x2: this._paper_scope.view.center.x - (photo_size.height / 2) + photo_size.height,
                y1: this._paper_scope.view.center.y - (photo_size.width / 2),
                y2: this._paper_scope.view.center.y - (photo_size.width / 2) + photo_size.width
            };
        } else {
            var crop_width = photo_size.width;
            var crop_height = photo_size.height;
            
            var point_bounds = {
                x1: this._paper_scope.view.center.x - (photo_size.width / 2),
                x2: this._paper_scope.view.center.x - (photo_size.width / 2) + photo_size.width,
                y1: this._paper_scope.view.center.y - (photo_size.height / 2),
                y2: this._paper_scope.view.center.y - (photo_size.height / 2) + photo_size.height
            };
        }
        
        var crop_rectangle = new Rectangle(point_bounds.x1, point_bounds.y1, crop_width, crop_height);
        this._crop_path = new Path.Rectangle(crop_rectangle);

        this._crop_path.selectedColor = new Color(0.8, 0.8, 0.8, 0.7);
        this._crop_path.fillColor = new Color(0, 0, 0, 0);
        this._crop_path.strokeColor = new Color(0.8, 0.8, 0.8, 0.7);
        this._crop_path.strokeWidth = 20;
        
        this._crop_path.resize_click = false;
        this._crop_path.resize_click_start = {};
        this._crop_path.point_bounds = point_bounds;
        this._crop_path.image_bounds = {
            left:   point_bounds.x1,
            right:  point_bounds.x2,
            top:    point_bounds.y1,
            bottom: point_bounds.y2
        };
        
        /* Crop Path Mouse Events */
        this._crop_path.onMouseLeave = function(event) {
            $("#upload_photo_canvas").css('cursor', 'auto');
        }

        this._crop_path.onMouseMove = function(event) {
            if (this.resize_click === false) {
                if ( (event.point.y < this.point_bounds.y1 + up_obj.resize_mouse_margin) && (event.point.x < this.point_bounds.x1 + up_obj.resize_mouse_margin)) {
                    /* Top Left */
                    $("#upload_photo_canvas").css('cursor', 'nwse-resize');
                } else if ( (event.point.y < this.point_bounds.y1 + up_obj.resize_mouse_margin) && (event.point.x > this.point_bounds.x2 - up_obj.resize_mouse_margin)) {
                    /* Top Right */
                    $("#upload_photo_canvas").css('cursor', 'nesw-resize');
                } else if ( (event.point.y > this.point_bounds.y2 - up_obj.resize_mouse_margin) && (event.point.x < this.point_bounds.x1 + up_obj.resize_mouse_margin)) {
                    /* Bottom Left */
                    $("#upload_photo_canvas").css('cursor', 'nesw-resize');
                } else if ( (event.point.y > this.point_bounds.y2 - up_obj.resize_mouse_margin) && (event.point.x > this.point_bounds.x2 - up_obj.resize_mouse_margin)) {
                    /* Bottom Right */
                    $("#upload_photo_canvas").css('cursor', 'nwse-resize');
                } else if (event.point.y < this.point_bounds.y1 + up_obj.resize_mouse_margin) {
                    /* Top */
                    $("#upload_photo_canvas").css('cursor', 'row-resize');
                } else if (event.point.y > this.point_bounds.y2 - up_obj.resize_mouse_margin) {
                    /* Bottom */
                    $("#upload_photo_canvas").css('cursor', 'row-resize');
                } else if (event.point.x < this.point_bounds.x1 + up_obj.resize_mouse_margin) {
                    /* Left Side */
                    $("#upload_photo_canvas").css('cursor', 'col-resize');
                } else if (event.point.x > this.point_bounds.x2 - up_obj.resize_mouse_margin) {
                    /* Right Side */
                    $("#upload_photo_canvas").css('cursor', 'col-resize');
                } else {
                    $("#upload_photo_canvas").css('cursor', 'move');
                }
            } else {
                up_obj._move_crop_mask(this, event);
            }
        }

        this._crop_path.onMouseDown = function(event) {
            this.resize_click_start = event.point;
            this.resize_click = true;
            
            /* Reset crop mask move flags */
            up_obj._crop_mask_adjust.reset();
                
            if ( (event.point.y < this.point_bounds.y1 + up_obj.resize_mouse_margin) && (event.point.x < this.point_bounds.x1 + up_obj.resize_mouse_margin)) {
                /* Top Left */
                up_obj._crop_mask_adjust.left = true;
                up_obj._crop_mask_adjust.top = true;
            } else if ((event.point.y < this.point_bounds.y1 + up_obj.resize_mouse_margin) && (event.point.x > this.point_bounds.x2 - up_obj.resize_mouse_margin)) {
                /* Top Right */
                up_obj._crop_mask_adjust.right = true;
                up_obj._crop_mask_adjust.top = true;
            } else if ((event.point.y > this.point_bounds.y2 - up_obj.resize_mouse_margin) && (event.point.x < this.point_bounds.x1 + up_obj.resize_mouse_margin)) {
                /* Bottom Left */
                up_obj._crop_mask_adjust.left = true;
                up_obj._crop_mask_adjust.bottom = true;
            } else if ((event.point.y > this.point_bounds.y2 - up_obj.resize_mouse_margin) && (event.point.x > this.point_bounds.x2 - up_obj.resize_mouse_margin)) {
                /* Bottom Right */
                up_obj._crop_mask_adjust.right = true;
                up_obj._crop_mask_adjust.bottom = true;
            } else if (event.point.y < this.point_bounds.y1 + up_obj.resize_mouse_margin) {
                /* Top */
                up_obj._crop_mask_adjust.top = true;
            } else if (event.point.y > this.point_bounds.y2 - up_obj.resize_mouse_margin) {
                /* Bottom */
                up_obj._crop_mask_adjust.bottom = true;
            } else if (event.point.x < this.point_bounds.x1 + up_obj.resize_mouse_margin) {
                /* Left Side */
                up_obj._crop_mask_adjust.left = true;
            } else if (event.point.x > this.point_bounds.x2 - up_obj.resize_mouse_margin) {
                /* Right Side */
                up_obj._crop_mask_adjust.right = true;
            } else {
                up_obj._crop_mask_adjust.left = true;
                up_obj._crop_mask_adjust.right = true;
                up_obj._crop_mask_adjust.top = true;
                up_obj._crop_mask_adjust.bottom = true;
                up_obj._crop_mask_adjust.move = true;
            }
        }
        
        this._crop_path.onMouseUp = function(event) {
            up_obj._upload_photo_mouse_up(this);
        }

        this._paper_scope.view.draw();
    }
};

UPLOAD_PREVIEW.prototype._upload_photo_mouse_up  = function(crop_path) {
    crop_path.resize_click_start = {};
    crop_path.resize_click = false;
    this._crop_mask_adjust.reset();
};

UPLOAD_PREVIEW.prototype._upload_photo_prep  = function() {
    if (this._image_selected === true) {
        /* Show help popup */
        $("#upload_photo_help").css('visibility','visible');
        $("#upload_photo_help_inner").html("Uploading Photo");
                    
        var changed_image = this._paper_scope.project.layers[0].rasterize();
        var img_dataurl = changed_image.toDataURL();
        
        this.upload_photo(img_dataurl);
    }
};

UPLOAD_PREVIEW.prototype.cancel_crop  = function() {
    $("#crop_photo_svg").attr('class', 'upload_svg_icon');
    this._image_crop = false;
    this._crop_path.removeSegments();
    this._paper_scope.view.draw();
};

UPLOAD_PREVIEW.prototype.crop_button  = function(up_obj) {
    if (up_obj._image_crop === true) {
        up_obj.cancel_crop();
    } else {
        up_obj._start_photo_crop();
    }
};

UPLOAD_PREVIEW.prototype.draw  = function(up_obj, ev) {
    this._paper_scope.project.clear();
    
    var img = new Image();
    var f = document.getElementById("input_upload_image").files[0];
    var url = window.URL || window.webkitURL;
    var src = url.createObjectURL(f);
    var up_obj = this;
    
    this._upload_image_raster = new Raster(src);
    
    this._upload_image_raster.onLoad = function() {
        up_obj.resize_raster();
        up_obj._image_selected = true;
        
        $("#rotate_ccw_svg").attr('class', 'upload_svg_icon');
        $("#rotate_cw_svg").attr('class', 'upload_svg_icon');
        $("#crop_photo_svg").attr('class', 'upload_svg_icon');
        $("#photo_upload_ok_svg").attr('class', 'upload_svg_icon');
    };
};

UPLOAD_PREVIEW.prototype.resize_canvas  = function() {
    var new_width = $("#upload_photo_page_inner").width();
    var new_height = $(window).innerHeight() - 100;
    
    $("#" + this._canvas_id).css({'width': new_width});
    $("#" + this._canvas_id).css({'height': new_height});
    
    var photo_help_top = $("#upload_photo_footer").position().top - 110;
    $("#upload_photo_help").css({'top': photo_help_top});
};

UPLOAD_PREVIEW.prototype.resize_raster  = function() {
    this._upload_image_raster.position = this._paper_scope.view.center;
    this._paper_scope.view.zoom = 1;
    
    var photo_size = this._upload_image_raster.size;
    var view_size = this._paper_scope.view.size;
    var width_ratio  = view_size.width  / photo_size.width;
    var height_ratio = view_size.height / photo_size.height;
    var img_rotation = Math.abs(Math.round(this._upload_image_raster.rotation));
    var up_obj = this;
    
    if (img_rotation == 90 || img_rotation == 270) {
        if (width_ratio < height_ratio) {
            this._paper_scope.view.zoom = width_ratio;
        } else {
            this._paper_scope.view.zoom = height_ratio;
        }
        
        if (this._paper_scope.view.size.width < photo_size.height) {
            this._paper_scope.view.zoom = this._paper_scope.view.zoom * (this._paper_scope.view.size.width / photo_size.height);
        }
    } else {
        if (width_ratio < height_ratio) {
            this._paper_scope.view.zoom = width_ratio;
        } else {
            this._paper_scope.view.zoom = height_ratio;
        }
    }
    
    this._upload_image_raster.onMouseMove = function(event) {
        if (up_obj._image_crop === true) {
            up_obj._move_crop_mask(up_obj._crop_path, event);
        }
    }
    
    this._upload_image_raster.onMouseUp = function(event) {
        up_obj._upload_photo_mouse_up(up_obj._crop_path);
    }
    
    this._paper_scope.view.draw();
};

UPLOAD_PREVIEW.prototype.rotate_cw  = function(up_obj) {
    up_obj._upload_image_raster.rotate(90);

    if (typeof up_obj._crop_path.rotate != "undefined") {
        up_obj._crop_path.rotate(90);
    }

    up_obj.resize_raster();
};

UPLOAD_PREVIEW.prototype.rotate_ccw  = function(up_obj) {
    up_obj._upload_image_raster.rotate(-90);
    
    if (typeof up_obj._crop_path.rotate != "undefined") {
        up_obj._crop_path.rotate(-90);
    }
    
    up_obj.resize_raster();
};

UPLOAD_PREVIEW.prototype.ok_button  = function() {
    if (this._image_selected === true) {
        if (this._image_crop === false) {
            this._upload_photo_prep();
        } else {
            /* Crop Photo */
            var img_rotation = this._upload_image_raster.rotation;
        
            if (Math.abs(Math.round(img_rotation)) != 0) {
                var crop_x = this._crop_path.point_bounds.y1 - this._crop_path.image_bounds.top;
                var crop_y = this._crop_path.image_bounds.right - this._crop_path.point_bounds.x2;
                var crop_w = this._crop_path.bounds.height;
                var crop_h = this._crop_path.bounds.width;
            } else {
                var crop_x = this._crop_path.point_bounds.x1 - this._crop_path.image_bounds.left;
                var crop_y = this._crop_path.point_bounds.y1 - this._crop_path.image_bounds.top;
                var crop_w = this._crop_path.point_bounds.x2 - this._crop_path.point_bounds.x1;
                var crop_h = this._crop_path.point_bounds.y2 - this._crop_path.point_bounds.y1;
            }
            
            var crop_bounds = new Rectangle(crop_x, crop_y, crop_w, crop_h);
            var cropped_dataurl = this._upload_image_raster.getSubRaster(crop_bounds).toDataURL();
            
            this._paper_scope.project.clear();
            
            this._upload_image_raster = new Raster(cropped_dataurl);
            this.resize_raster();
            
            if (Math.abs(Math.round(img_rotation)) != 0) {
                this._upload_image_raster.rotate(img_rotation);
            }
            
            this._image_crop = false;
            $("#crop_photo_svg").attr('class', 'upload_svg_icon');
        }
    }
};

UPLOAD_PREVIEW.prototype.notify_upload_complete  = function(successful) {
    if (successful === true) {
        $("#upload_photo_help_inner").html("Finished Uploading Photo");
    } else {
        $("#upload_photo_help_inner").html("Error Uploading Photo");
    }
}

        var upload_preview_obj = new UPLOAD_PREVIEW("upload_photo_page_inner");
        upload_preview_obj.init("upload_photo_page_inner");
        
        upload_preview_obj.upload_photo = function(data_url) {
            /* Use this function to override upload_photo with your own code */
            var data = {
                'photo_data': data_url
            };
            
            $.ajax({
               type:     'POST',
               url:      'http://alec.dhuse.com/cs/photo_upload/add_photo.php',
               dataType: 'json',
               data:     data,
               success:  function(response) {
                    if (response.result_code > 0) {
                        /* Success Code Here */
                        upload_preview_obj.notify_upload_complete(true);
                    } else {
                        /* API Fail Code Here */
                        upload_preview_obj.notify_upload_complete(false);
                    }
                   
                    console.log(response);
               },
               error: function (req, status, error) {
                    /* AJAX Fail Code Here */
                    upload_preview_obj.notify_upload_complete(false);
                    console.log(error);
               }
            });
        };
            
          
!
999px
Loading ..................

Console