jquery - 图像裁剪脚本无法实时运行

Question

尝试使用此功能最终会导致图像上没有裁剪选择，并且裁剪按钮不是红色且不可点击。

我使用与 codpen 中相同的代码，但它在我的网站上不起作用。 codepen 是否可能在幕后加载一些我没有加载的东西？

它捕获了我

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

我的: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');
    });

}

Answer 1

将插件代码添加到脚本顶部。

<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>