CODEWITHSUNDEEP
jqueryhtmlcss
Techagesite
Techagesite

Reputation: 475

Image crop script not working live

Trying to use this ends up with no cropping selection on the image and the crop button isn't red and clickable.

I'm using the same code as in the codpen but its not working on my site. Is codepen maybe loading something behind the scenes that im not?

Its got me

Pen http://codepen.io/anon/pen/ZbmOxp

Mine: http://www.techagesite.com/aaa.htm

css:

* {
    box-sizing: border-box;
}

html,
body {
    height: 100%;
}

body {
    padding: 20px;
    text-align: center;
    color: #111;
    background-image: radial-gradient(ellipse farthest-corner at center, #7abcff 0%,#4096ee 100%);
}

img {
    max-width: 100%;
}

section {
    height: 100%;
}

.hidden {
    display: none;
}

.drop {
    position: relative;
    width: 100%;
    height: 100%;
    font-family: Lobster, Arial, serif;
    font-size: 30px;
    color: #333;
    background-color: rgba(255,255,255,.2);
    border: 5px dashed rgba(51,51,51,.4);
    cursor: pointer;
    transition-properties: border;
    transition-duration: 0.2s;

    &.dragging,
    &:hover {
        border-color: rgba(51,51,51,.8);
    }

    p {
        position: absolute;
        top: 50%;
        width: 100%;
        margin-top: -19px;
        margin-bottom: 0;
        text-align: center;
    }
}

.image-resize {
    max-width: 800px;
    margin: auto;
}

.btn {
    margin-top: 20px;
    padding: 8px 25px;
    font-family: "Ubuntu";
    font-size: 16px;
    color: #fff;
    background-image: linear-gradient(to bottom, #c92437 0%, darken(#c92437, 10%) 100%);
    border: 0;
    border-radius: 5px;
    box-shadow: 1px 1px 2px rgba(0,0,0,.3);

    .fa:first-child {
        margin-right: 5px; 
    }
}

.thumbnail {
    display: inline-block;
    margin: auto;
    padding: 5px;
    background-color: rgba(255,255,255,.4);
    border-radius: 5px;

    img {
        display: block;
        border-radius: 5px;
    }
}

Html

<!-- Upload image -->
<section id="sectionDragAndDrop">
    <div class="drop" id="drop">
        <p>Drag & drop or click here to upload an image.</p>
    </div>
    <input class="file-upload hidden" id="fileUpload" type="file">
</section>

<!-- Resize image -->
<section class="hidden" id="sectionResize">
    <div class="image-resize" id="imageResize"></div>
  <button class="btn" id="crop"><span class='fa fa-crop'></span> Crop</button>
</section>

<!-- Insert thumbnail -->
<section class="hidden" id="sectionThumbnail">
    <div class="thumbnail" id="thumbnail"></div>
</section>

Js

<script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>

$('#drop').on('click', function() {
    $('#fileUpload').trigger('click');
});

$('#fileUpload').on('change', function(e) {
    addImage(e.target);
});

$("#drop").on("dragover", function(e) {
    e.preventDefault();
    e.stopPropagation();
    $(this).addClass('dragging');
});

$("#drop").on("dragleave", function(e) {
    $(this).removeClass('dragging');
});

$("#drop").on("drop", function(e) {
    e.preventDefault();
    e.stopPropagation();
    var data = e.dataTransfer || e.originalEvent.dataTransfer;
    addImage(data);
});

function addImage(data) {
    var file = data.files[0];
    if (file.type.indexOf('image') === -1) {
        alert('Sorry, the file you uploaded doesn\'t appear to be an image.');
        return false;
    }

    var reader = new FileReader();
    reader.onload = function(event) {
        var img = new Image();
        img.onload = function() {
            if (img.width < 200 || img.height < 400) {
                alert('Sorry, the image you uploaded doesn\'t appear to be large enough.');
                return false;
            }
            cropImage(img);
        }
        img.src = event.target.result;
    }
    reader.readAsDataURL(file);
}

function cropImage(originalImage) {

    $(originalImage).attr('id', 'fullImage');
    $('#imageResize').html(originalImage);
    $('#sectionDragAndDrop').addClass('hidden');
    $('#sectionResize').removeClass('hidden');

    var newImage = new imageCrop('#fullImage', 200, 400);

    $('#crop').on('click', function() {
        var results = newImage.crop();
        $('#thumbnail').html(results.img);
        $('#sectionResize').addClass('hidden');
        $('#sectionThumbnail').removeClass('hidden');
    });

}

Upvotes: 2

Views: 1868

Answers (3)

IanS
IanS

Reputation: 315

If you look at the source in codepen there is a script section that defines the imageCrop method. You have missed that out entirely in your code.

To fix, add this in above your existing script section:

<script>
imageCrop = function(imageTarget, requiredWidth, requiredHeight) {
// Variables
var $doc = $(document),
    $cropMarker,
    $originalImage,
    origSrc = new Image(),
    imageTarget = $(imageTarget).get(0),
    imageScale,
    imageRatio,
    cropRatio,
    adjustedRequiredWidth,
    adjustedRequiredHeight,
    eventState = {},
    allowResize = true,
    keyboardMove = false,
    imageLoaded = new $.Deferred();

origSrc.crossOrigin = "Anonymous";

function init() {
    origSrc.onload = function() {
        // Check to make sure the target image is large enough
        if (origSrc.width < requiredWidth || origSrc.height < requiredHeight) {
            console.log('Image Crop error: The required dimensions are larger than the target image.');
            return false;
        }

        // And neccessary html
        $(imageTarget).wrap('<div class="ic-container"></div>').before('\
            <div class="ic-overlay-n" id="icOverlayN"></div>\
            <div class="ic-overlay-e" id="icOverlayE"></div>\
            <div class="ic-overlay-s" id="icOverlayS"></div>\
            <div class="ic-overlay-w" id="icOverlayW"></div>\
            <div class="ic-crop-marker" id="icCropMarker">\
                <div class="ic-resize-handle-nw" id="icResizeHandleNW"></div>\
                <div class="ic-resize-handle-ne" id="icResizeHandleNE"></div>\
                <div class="ic-resize-handle-sw" id="icResizeHandleSW"></div>\
                <div class="ic-resize-handle-se" id="icResizeHandleSE"></div>\
                <div class="ic-move-handle" id="icMoveHandle"></div>\
            </div>\
        ');
        $cropMarker = $('#icCropMarker');
        $originalImage = $(imageTarget);
        imageScale = origSrc.width / $originalImage.width();
        imageRatio = origSrc.width / origSrc.height;
        cropRatio = requiredWidth / requiredHeight;
        adjustedRequiredWidth = requiredWidth / imageScale;
        adjustedRequiredHeight = requiredHeight / imageScale;

        centerCropMarker();
        repositionOverlay();

        $cropMarker.on('mousedown touchstart', startResize);
        $cropMarker.on('mousedown touchstart', '#icMoveHandle', startMoving);
        imageLoaded.resolve();
    };
    origSrc.src = imageTarget.src;
};

function startResize(e) {
    e.preventDefault();
    e.stopPropagation();
    saveEventState(e);
    $doc.on('mousemove touchmove', resizing);
    $doc.on('mouseup touchend', endResize);
};

function endResize(e) {
    e.preventDefault();
    $doc.off('mouseup touchend', endResize);
    $doc.off('mousemove touchmove', resizing);
};

function resizing(e) {
    var mouse = {},
        width,
        height,
        left,
        top,
        originalWidth = $cropMarker.outerWidth(),
        originalHeight = $cropMarker.outerHeight(),
        originalOffset = $cropMarker.position();
    mouse.x = (e.clientX || e.pageX || e.originalEvent.touches[0].clientX) + $(window).scrollLeft();
    mouse.y = (e.clientY || e.pageY || e.originalEvent.touches[0].clientY) + $(window).scrollTop();

    var SE = false,
        SW = false,
        NW = false,
        NE = false;

    if ($(eventState.evnt.target).is('#icResizeHandleSE')) {
        SE = true;
    } else if ($(eventState.evnt.target).is('#icResizeHandleSW')) {
        SW = true;
    } else if ($(eventState.evnt.target).is('#icResizeHandleNW')) {
        NW = true;
    } else if ($(eventState.evnt.target).is('#icResizeHandleNE')) {
        NE = true;
    }

    if (SE) {
        width = mouse.x - eventState.containerLeft - $originalImage.offset().left;
        height = width / requiredWidth * requiredHeight;
        left = eventState.containerLeft;
        top = eventState.containerTop;
    } else if (SW) {
        width = eventState.containerWidth - (mouse.x - eventState.containerLeft - $originalImage.offset().left);
        height = width / requiredWidth * requiredHeight;
        left = mouse.x - $originalImage.offset().left;
        top = eventState.containerTop;
    } else if (NW) {
        width = eventState.containerWidth - (mouse.x - eventState.containerLeft - $originalImage.offset().left);
        height = width / requiredWidth * requiredHeight;
        left = mouse.x - $originalImage.offset().left;
        top = originalOffset.top + originalHeight - height;
    } else if (NE) {
        width = mouse.x - eventState.containerLeft - $originalImage.offset().left;
        height = width / requiredWidth * requiredHeight;
        left = eventState.containerLeft;
        top = originalOffset.top + originalHeight - height;
    }

    if (
        top >= 0 &&
        left >= 0 &&
        Math.round(top + height) <= Math.round($originalImage.height()) &&
        Math.round(left + width) <= Math.round($originalImage.width())
    ) {
        allowResize = true;
    }

    if (allowResize) {
        // Over top boundary
        if (top < 0) {
            height = originalHeight + originalOffset.top;
            width = height / requiredHeight * requiredWidth;
            top = 0;
            if (NW) {
                left = originalOffset.left - (width - originalWidth);
            }
            allowResize = false;
        }
        // Over left boundary
        else if (left < 0) {
            width = originalWidth + originalOffset.left;
            height = width / requiredWidth * requiredHeight;
            left = 0;
            if (SE) {
                top = originalOffset.top - (height - originalHeight);
            }
            allowResize = false;
        }
        // Over bottom boundary
        else if (Math.round(top + height) > Math.round($originalImage.height())) {
            height = $originalImage.height() - top;
            width = height / requiredHeight * requiredWidth;
            if (SW) {
                left = originalOffset.left - (width - originalWidth);
            }
            allowResize = false;
        }
        // Over right boundary
        else if (Math.round(left + width) > Math.round($originalImage.width())) {
            width = $originalImage.width() - left;
            height = width / requiredWidth * requiredHeight;
            if (NE) {
                top = originalOffset.top - (height - originalHeight);
            }
            allowResize = false;
        }

        // Check for min width / height
        if (width > adjustedRequiredWidth && height > adjustedRequiredHeight) {
            $cropMarker.outerWidth(width).outerHeight(height);
            $cropMarker.css({
                'left': left,
                'top': top
            });
        } else {
            if (SW || NW) {
                left = left - (adjustedRequiredWidth - width);
            }
            if (NW || NE) {
                top = top - (adjustedRequiredHeight - height);
            }
            $cropMarker.outerWidth(adjustedRequiredWidth).outerHeight(adjustedRequiredHeight);
            $cropMarker.css({
                'left': left,
                'top': top
            });
        }
    }
    repositionOverlay();
}

function startMoving(e) {
    e.preventDefault();
    e.stopPropagation();
    saveEventState(e);
    $doc.on('mousemove touchmove', moving);
    $doc.on('mouseup touchend', endMoving);
};

function endMoving(e) {
    e.preventDefault();
    $doc.off('mouseup touchend', endMoving);
    $doc.off('mousemove touchmove', moving);
};

function moving(e) {
    var top,
        left,
        mouse = {},
        touches;
    e.preventDefault();
    e.stopPropagation();

    touches = e.originalEvent.touches;

    mouse.x = (e.clientX || e.pageX || touches[0].clientX) + $(window).scrollLeft();
    mouse.y = (e.clientY || e.pageY || touches[0].clientY) + $(window).scrollTop();

    top = mouse.y - (eventState.mouseY - eventState.containerTop);
    left = mouse.x - (eventState.mouseX - eventState.containerLeft);
    if (top < 0) {
        top = 0;
    }
    if (top + $cropMarker.outerHeight() > $originalImage.height()) {
        top = $originalImage.height() - $cropMarker[0].getBoundingClientRect().height;
    }
    if (left < 0) {
        left = 0;
    }
    if (left + $cropMarker.outerWidth() > $originalImage.width()) {
        left = $originalImage.width() - $cropMarker[0].getBoundingClientRect().width;
    }
    $cropMarker.css({
        'top': top,
        'left': left
    });
    repositionOverlay();
};

document.addEventListener('keydown', function(e) {
    var top,
        left,
        shiftAmount,
        top = $cropMarker.position().top,
        left = $cropMarker.position().left;
    if (e.shiftKey) {
        shiftAmount = 10;
    } else {
        shiftAmount = 1;
    }

    if (e.keyCode === 37) {
        left = left - shiftAmount;
    } else if (e.keyCode === 38) {
        top = top - shiftAmount;
    } else if (e.keyCode === 39) {
        left = left + shiftAmount;
    } else if (e.keyCode === 40) {
        top = top + shiftAmount;
    }

    if (top < 0) {
        top = 0;
    }
    if (top + $cropMarker.outerHeight() > $originalImage.height()) {
        top = $originalImage.height() - $cropMarker[0].getBoundingClientRect().width;
    }
    if (left < 0) {
        left = 0;
    }
    if (left + $cropMarker.outerWidth() > $originalImage.width()) {
        left = $originalImage.width() - $cropMarker[0].getBoundingClientRect().width;
    }

    if (keyboardMove) {
        $cropMarker.css({
            'top': top,
            'left': left
        });
        repositionOverlay();
    }
});

$doc.click(function(e) {
    if ($(e.target).closest('.ic-container').length) {
        keyboardMove = true;
    } else {
        keyboardMove = false;
    }
})

var saveEventState = function(e) {
    eventState.containerWidth = $cropMarker.outerWidth();
    eventState.containerHeight = $cropMarker.outerHeight();
    eventState.containerLeft = $cropMarker.position().left;
    eventState.containerTop = $cropMarker.position().top;
    eventState.mouseX = (e.clientX || e.pageX || e.originalEvent.touches[0].clientX) + $(window).scrollLeft();
    eventState.mouseY = (e.clientY || e.pageY || e.originalEvent.touches[0].clientY) + $(window).scrollTop();
    eventState.evnt = e;
};

var centerCropMarker = function() {
    if (cropRatio > imageRatio) {
        $cropMarker.outerWidth($originalImage.width());
        $cropMarker.outerHeight($cropMarker.outerWidth() / requiredWidth * requiredHeight);
        $cropMarker.css({
            top: ($originalImage.height() - $cropMarker.height()) / 2 + 'px',
            left: 0
        });
    } else {
        $cropMarker.outerHeight($originalImage.height());
        $cropMarker.outerWidth($cropMarker.outerHeight() / requiredHeight * requiredWidth);
        $cropMarker.css({
            left: ($originalImage.width() - $cropMarker.width()) / 2 + 'px',
            top: 0
        });
    }
}

function repositionOverlay() {
    var imgWidth = $originalImage[0].getBoundingClientRect().width,
        imgHeight = $originalImage[0].getBoundingClientRect().height,
        cropTop = $cropMarker.position().top,
        cropLeft = $cropMarker.position().left,
        cropWidth = $cropMarker[0].getBoundingClientRect().width,
        cropHeight = $cropMarker[0].getBoundingClientRect().height,
        cropBorder = parseFloat($cropMarker.css('border-top-width'));
    $('#icOverlayN').css({
        right: imgWidth - cropLeft - cropWidth,
        height: cropTop,
        left: cropLeft
    });
    $('#icOverlayE').css({
        left: cropLeft + cropWidth
    });
    $('#icOverlayS').css({
        right: imgWidth - cropLeft - cropWidth,
        top: cropTop + cropHeight,
        left: cropLeft
    });
    $('#icOverlayW').css({
        width: cropLeft
    });
};

// Crop to required size
this.crop = function() {
    var cropCanvas,
        img = new Image(),
        scale = origSrc.width / $originalImage.width(),
        left = Math.round($cropMarker.position().left * scale),
        top = Math.round($cropMarker.position().top * scale),
        width = Math.round($cropMarker.outerWidth() * scale),
        height = Math.round($cropMarker.outerHeight() * scale);
    results;

    cropCanvas = document.createElement('canvas');
    cropCanvas.width = requiredWidth;
    cropCanvas.height = requiredHeight;
    cropCanvas.getContext('2d').drawImage(origSrc, left, top, width, height, 0, 0, requiredWidth, requiredHeight);

    img.src = cropCanvas.toDataURL();

    var results = {
        img: img,
        left: left,
        top: top,
        width: width,
        height: height,
        requiredWidth: requiredWidth,
        requiredHeight: requiredHeight
    };
    return results;
}

this.position = function(left, top, width, height) {
    $.when(imageLoaded).done(function() {
        var scale = origSrc.width / $originalImage.width();
        left = Math.round(left / scale),
            top = Math.round(top / scale),
            width = Math.round(width / scale),
            height = Math.round(height / scale);
        $cropMarker.outerWidth(width).outerHeight(height);
        $cropMarker.css({
            'left': left,
            'top': top
        });
        repositionOverlay();
    });
}

this.cropReset = function() {
    centerCropMarker();
    repositionOverlay();
}

// Viewport resize
$(window).resize(function() {
    imageScale = origSrc.width / $originalImage.width();
    adjustedRequiredWidth = requiredWidth / imageScale;
    adjustedRequiredHeight = requiredHeight / imageScale;
    centerCropMarker();
    repositionOverlay();
});

init();
};

// Initiate Image Crop
if ($('#exampleImage').length) {
var exampleCrop = new imageCrop('#exampleImage', 200, 200);
}

// Crop event
$('#exampleCrop').on('click', function() {
var results = exampleCrop.crop();
$('body').html(results.img);
});
</script>

Upvotes: 2

Alex
Alex

Reputation: 8695

Add the plugin code in to top of the script.

<script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
<script>
/*   This is imageCrop plugin   */

var imageCrop=function(e,t,i){function o(){H.onload=function(){return H.width<t||H.height<i?(console.log("Image Crop error: The required dimensions are larger than the target image."),!1):($(e).wrap('<div class="ic-container"></div>').before('                <div class="ic-overlay-n" id="icOverlayN"></div>                <div class="ic-overlay-e" id="icOverlayE"></div>                <div class="ic-overlay-s" id="icOverlayS"></div>                <div class="ic-overlay-w" id="icOverlayW"></div>                <div class="ic-crop-marker" id="icCropMarker">                    <div class="ic-resize-handle-nw" id="icResizeHandleNW"></div>                    <div class="ic-resize-handle-ne" id="icResizeHandleNE"></div>                    <div class="ic-resize-handle-sw" id="icResizeHandleSW"></div>                    <div class="ic-resize-handle-se" id="icResizeHandleSE"></div>                    <div class="ic-move-handle" id="icMoveHandle"></div>                </div>            '),l=$("#icCropMarker"),u=$(e),f=H.width/u.width(),g=H.width/H.height,v=t/i,p=t/f,w=i/f,z(),s(),l.on("mousedown touchstart",n),l.on("mousedown touchstart","#icMoveHandle",d),void R.resolve())},H.src=e.src}function n(e){e.preventDefault(),e.stopPropagation(),C(e),m.on("mousemove touchmove",c),m.on("mouseup touchend",r)}function r(e){e.preventDefault(),m.off("mouseup touchend",r),m.off("mousemove touchmove",c)}function c(e){var o,n,r,c,d={},h=l.outerWidth(),a=l.outerHeight(),f=l.position();d.x=(e.clientX||e.pageX||e.originalEvent.touches[0].clientX)+$(window).scrollLeft(),d.y=(e.clientY||e.pageY||e.originalEvent.touches[0].clientY)+$(window).scrollTop();var g=!1,v=!1,m=!1,H=!1;$(y.evnt.target).is("#icResizeHandleSE")?g=!0:$(y.evnt.target).is("#icResizeHandleSW")?v=!0:$(y.evnt.target).is("#icResizeHandleNW")?m=!0:$(y.evnt.target).is("#icResizeHandleNE")&&(H=!0),g?(o=d.x-y.containerLeft-u.offset().left,n=o/t*i,r=y.containerLeft,c=y.containerTop):v?(o=y.containerWidth-(d.x-y.containerLeft-u.offset().left),n=o/t*i,r=d.x-u.offset().left,c=y.containerTop):m?(o=y.containerWidth-(d.x-y.containerLeft-u.offset().left),n=o/t*i,r=d.x-u.offset().left,c=f.top+a-n):H&&(o=d.x-y.containerLeft-u.offset().left,n=o/t*i,r=y.containerLeft,c=f.top+a-n),c>=0&&r>=0&&Math.round(c+n)<=Math.round(u.height())&&Math.round(r+o)<=Math.round(u.width())&&(W=!0),W&&(0>c?(n=a+f.top,o=n/i*t,c=0,m&&(r=f.left-(o-h)),W=!1):0>r?(o=h+f.left,n=o/t*i,r=0,g&&(c=f.top-(n-a)),W=!1):Math.round(c+n)>Math.round(u.height())?(n=u.height()-c,o=n/i*t,v&&(r=f.left-(o-h)),W=!1):Math.round(r+o)>Math.round(u.width())&&(o=u.width()-r,n=o/t*i,H&&(c=f.top-(n-a)),W=!1),o>p&&n>w?(l.outerWidth(o).outerHeight(n),l.css({left:r,top:c})):((v||m)&&(r-=p-o),(m||H)&&(c-=w-n),l.outerWidth(p).outerHeight(w),l.css({left:r,top:c}))),s()}function d(e){e.preventDefault(),e.stopPropagation(),C(e),m.on("mousemove touchmove",a),m.on("mouseup touchend",h)}function h(e){e.preventDefault(),m.off("mouseup touchend",h),m.off("mousemove touchmove",a)}function a(e){var t,i,o,n={};e.preventDefault(),e.stopPropagation(),o=e.originalEvent.touches,n.x=(e.clientX||e.pageX||o[0].clientX)+$(window).scrollLeft(),n.y=(e.clientY||e.pageY||o[0].clientY)+$(window).scrollTop(),t=n.y-(y.mouseY-y.containerTop),i=n.x-(y.mouseX-y.containerLeft),0>t&&(t=0),t+l.outerHeight()>u.height()&&(t=u.height()-l[0].getBoundingClientRect().height),0>i&&(i=0),i+l.outerWidth()>u.width()&&(i=u.width()-l[0].getBoundingClientRect().width),l.css({top:t,left:i}),s()}function s(){var e=u[0].getBoundingClientRect().width,t=(u[0].getBoundingClientRect().height,l.position().top),i=l.position().left,o=l[0].getBoundingClientRect().width,n=l[0].getBoundingClientRect().height;parseFloat(l.css("border-top-width"));$("#icOverlayN").css({right:e-i-o,height:t,left:i}),$("#icOverlayE").css({left:i+o}),$("#icOverlayS").css({right:e-i-o,top:t+n,left:i}),$("#icOverlayW").css({width:i})}var l,u,f,g,v,p,w,m=$(document),H=new Image,e=$(e).get(0),y={},W=!0,M=!1,R=new $.Deferred;H.crossOrigin="Anonymous",document.addEventListener("keydown",function(e){var t,i,o,t=l.position().top,i=l.position().left;o=e.shiftKey?10:1,37===e.keyCode?i-=o:38===e.keyCode?t-=o:39===e.keyCode?i+=o:40===e.keyCode&&(t+=o),0>t&&(t=0),t+l.outerHeight()>u.height()&&(t=u.height()-l[0].getBoundingClientRect().width),0>i&&(i=0),i+l.outerWidth()>u.width()&&(i=u.width()-l[0].getBoundingClientRect().width),M&&(l.css({top:t,left:i}),s())}),m.click(function(e){M=$(e.target).closest(".ic-container").length?!0:!1});var C=function(e){y.containerWidth=l.outerWidth(),y.containerHeight=l.outerHeight(),y.containerLeft=l.position().left,y.containerTop=l.position().top,y.mouseX=(e.clientX||e.pageX||e.originalEvent.touches[0].clientX)+$(window).scrollLeft(),y.mouseY=(e.clientY||e.pageY||e.originalEvent.touches[0].clientY)+$(window).scrollTop(),y.evnt=e},z=function(){v>g?(l.outerWidth(u.width()),l.outerHeight(l.outerWidth()/t*i),l.css({top:(u.height()-l.height())/2+"px",left:0})):(l.outerHeight(u.height()),l.outerWidth(l.outerHeight()/i*t),l.css({left:(u.width()-l.width())/2+"px",top:0}))};this.crop=function(){var e,o=new Image,n=H.width/u.width(),r=Math.round(l.position().left*n),c=Math.round(l.position().top*n),d=Math.round(l.outerWidth()*n),h=Math.round(l.outerHeight()*n);e=document.createElement("canvas"),e.width=t,e.height=i,e.getContext("2d").drawImage(H,r,c,d,h,0,0,t,i),o.src=e.toDataURL();var a={img:o,left:r,top:c,width:d,height:h,requiredWidth:t,requiredHeight:i};return a},this.position=function(e,t,i,o){$.when(R).done(function(){var n=H.width/u.width();e=Math.round(e/n),t=Math.round(t/n),i=Math.round(i/n),o=Math.round(o/n),l.outerWidth(i).outerHeight(o),l.css({left:e,top:t}),s()})},this.cropReset=function(){z(),s()},$(window).resize(function(){f=H.width/u.width(),p=t/f,w=i/f,z(),s()}),o()};


$('#drop').on('click', function() {
    $('#fileUpload').trigger('click');
});

$('#fileUpload').on('change', function(e) {
    addImage(e.target);
});

$("#drop").on("dragover", function(e) {
    e.preventDefault();
    e.stopPropagation();
    $(this).addClass('dragging');
});

$("#drop").on("dragleave", function(e) {
    $(this).removeClass('dragging');
});

$("#drop").on("drop", function(e) {
    e.preventDefault();
    e.stopPropagation();
    var data = e.dataTransfer || e.originalEvent.dataTransfer;
    addImage(data);
});

function addImage(data) {
    var file = data.files[0];
    if (file.type.indexOf('image') === -1) {
        alert('Sorry, the file you uploaded doesn\'t appear to be an image.');
        return false;
    }

    var reader = new FileReader();
    reader.onload = function(event) {
        var img = new Image();
        img.onload = function() {
            if (img.width < 200 || img.height < 400) {
                alert('Sorry, the image you uploaded doesn\'t appear to be large enough.');
                return false;
            }
            cropImage(img);
        }
        img.src = event.target.result;
    }
    reader.readAsDataURL(file);
}

function cropImage(originalImage) {

    $(originalImage).attr('id', 'fullImage');
    $('#imageResize').html(originalImage);
    $('#sectionDragAndDrop').addClass('hidden');
    $('#sectionResize').removeClass('hidden');

    var newImage = new imageCrop('#fullImage', 200, 400);

    $('#crop').on('click', function() {
        var results = newImage.crop();
        $('#thumbnail').html(results.img);
        $('#sectionResize').addClass('hidden');
        $('#sectionThumbnail').removeClass('hidden');
    });

}
</script>

Upvotes: 2

Bruno
Bruno

Reputation: 151

If you check your console, you can see there the error.

ReferenceError: imageCrop is not defined

var newImage = new imageCrop('#fullImage', 200, 400);

Upvotes: 1

Related Questions