請教有經驗的前輩一下！
我在網路上找到這一篇 http://f2ex.cn/use-javascript-and-canvas-to-resize-the-image/

然後依照他的說明卻出現個問題，不知道是因為 js 的冒泡默認行為或是其他原因導致沒有裁減成功，詳情如，在他提供的演示案例中：

https://tympanus.net/Tutorials/ImageResizeCropCanvas/

當按下 右下角的 Crop 時，本來預期是圖片擷取在畫面上，而它卻直接跳往另一新頁面，請問我該怎麼做才能修改此一行為？

點按 Crop 按柳時 會執行的函數 crop() 如下：

crop = function(){
    var crop_canvas,
        left = $('.overlay').offset().left - $container.offset().left,
        top =  $('.overlay').offset().top - $container.offset().top,
        width = $('.overlay').width(),
        height = $('.overlay').height();
        
    crop_canvas = document.createElement('canvas');
    crop_canvas.width = width;
    crop_canvas.height = height;
    
    crop_canvas.getContext('2d').drawImage(image_target, left, top, width, height, 0, 0, width, height);
    window.open(crop_canvas.toDataURL("image/png"));
}

有勞前輩指導一下！謝謝！

謝謝 @ccutmis 前輩指導，以下是更進階請教：
補上我自己 onload 以後的程式碼：(解決上傳圖片無法立即顯示問題）

<script>
    $(document).ready(function() {
        $("#avatar").on('change', function() {
            var file = $(this)[0];

            // 調用 檢查副檔名 函數
            checkFile(file);
            var limitW = '300';
            var limitH = '300';

            var windowURL = window.URL || window.webkitURL;
            var dataURL;
            dataURL = windowURL.createObjectURL(file.files[0]);
            var img = $("#preview");
            img.attr('src', dataURL);

            var reader = new FileReader();
            reader.readAsDataURL(this.files[0]);
            reader.onload = function() {
                if (img[0].width < limitW) {
                    img.width(img[0].width + "px");
                    $("#info").addClass("alert-warning").show().html("圖片寬、高 都至少需要<b> 300px </b> 不夠寬 請重選");
                    return false;
                }
                if (img[0].height < limitH) {
                    img.height(limitH + "px");
                    $("#info").addClass("alert-warning").show().html("圖片 寬、高 都至少需要<b> 300px </b> 不夠高請重選");
                    return false;
                }
                reSizeableImage($('.resize-image'));
            }               
        })
    })

    // 檢查副檔名 函數
    function checkFile(sender) {
        // 可接受的附檔名
        var validExts = new Array(".GIF", ".PNG", ".JPEG", ".JPG", ".gif", ".png", ".jpeg", ".jpg");

        var fileExt = sender.value;
        fileExt = fileExt.substring(fileExt.lastIndexOf('.'));
        if (validExts.indexOf(fileExt) < 0) {
            alert("檔案類型錯誤，可接受的副檔名有：.gif, .png, .jpeg, .jpg");
            sender.value = null;
            return false;
        } else {
            return true;
        }
    }
</script>