0

I am able to upload the image the user selected to my project however the image is no longer cropped. I want to uploaded the cropped image but the image that is uploaded is not cropped how can I upload the cropped image to my asp.net mvc. The image that is saved is not cropped what must I change in my jquery code to be able to upload the cropped image instead of the normal image. Thank you for your help.

I have used to following link https://codepen.io/HairyT/pen/axNrdZ to make the UI.

Here is my jquery code.

<script id="rendered-js">
    // Requires jQuery
    var 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);
    });

    $("#uploadCropedImage").on('click', function () {
        try {
            var formData = new FormData();
            var totalFiles = document.getElementById('fileUpload').files.length;
            for (var i = 0; i < totalFiles; i++) {
                var file = document.getElementById('fileUpload').files[i];
                formData.append("p_file", file);
            }
            $.ajax({
                type: "POST",
                url: '/configuracionGeneral/UploadImage',
                data: formData,
                dataType: 'json',
                contentType: false, // Not to set any content header
                processData: false, // Not to process data
                success: function (result) {
                    alert(result);
                },
                error: function (err) {
                    alert(err.statusText);
                }
            });
        } catch (e) {
            alert("File Upload Error" + e.message);
        }
    });




    $('#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 < 300 || img.height < 300) {
                    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', 600, 600);

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

    }
//# sourceURL=pen.js
</script>

Here is my asp.net mvc

[HttpPost]
public ActionResult UploadImage(HttpPostedFileBase[] p_file) //HttpPostedFileBase file 
{
    try
    {
        string yourfilepathfolder = "~/Content/images/";
        for (int i = 0; i < Request.Files.Count; i++)
        {
            var file = Request.Files[i];
            var fileName = Path.GetFileName(file.FileName);
            fileName = Guid.NewGuid().ToString() + "_" + fileName;
            var path = Path.Combine(Server.MapPath(yourfilepathfolder), fileName);
            file.SaveAs(path);
        }
        return Json("file has been uploaded");
    }
    catch (Exception ex)
    {
        return Json(null);
    }
}

And here is the code that makes my UI

<h3>Logo de la compañía</h3>
<section id="sectionDragAndDrop">
    <div class="drop" id="drop">
        <p>Drag &amp; drop or click here to upload an image.</p>
    </div>
    <input class="file-upload hidden" id="fileUpload" type="file">
</section>

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

<section class="hidden" id="sectionThumbnail">
    <div class="thumbnail" id="thumbnail"></div>
    <button class="btn btn-primary" id="uploadCropedImage"><span class="fa fa-crop"></span> Approve and upload</button>
</section>
<div class="space-bottom"></div>

Thank you again for your help.

Improve this question

1 Answer 1

Reset to default
2
+50

because you are sending the original file at line: data: formData, and :

var formData = new FormData();
var totalFiles = document.getElementById('fileUpload').files.length;
for (var i = 0; i < totalFiles; i++) {
   var file = document.getElementById('fileUpload').files[i];
   formData.append("p_file", file);
}

as i can see the cropped image in the code pen, the cropped image is base64 image under this section:

<div class="thumbnail" id="thumbnail"></div>

so you should first extract the result base64 code:

var ImageURL = $('#thumbnail img').attr('src');

var block = ImageURL.split(";");

var contentType = block[0].split(":")[1];

// get the real base64 content of the file
var base64 = block[1].split(",")[1];

// Convert it to a blob to upload
var blob = b64toBlob(base64, contentType);

// Create a FormData and append the file with "image" as parameter name
var formDataToUpload = new FormData();

formDataToUpload.append("image", blob);

and this is the function for convert base64 to blob:

function b64toBlob(b64Data, contentType, sliceSize) {
        contentType = contentType || '';
        sliceSize = sliceSize || 512;

        var byteCharacters = atob(b64Data);
        var byteArrays = [];

        for (var offset = 0; offset < byteCharacters.length; offset += sliceSize) {
            var slice = byteCharacters.slice(offset, offset + sliceSize);

            var byteNumbers = new Array(slice.length);
            for (var i = 0; i < slice.length; i++) {
                byteNumbers[i] = slice.charCodeAt(i);
            }

            var byteArray = new Uint8Array(byteNumbers);

            byteArrays.push(byteArray);
        }

      var blob = new Blob(byteArrays, {type: contentType});
      return blob;
}

and finally replace formDataToUpload with formData here:

$.ajax({
                type: "POST",
                url: '/configuracionGeneral/UploadImage',
                data: formDataToUpload, // replace here
                dataType: 'json',
                contentType: false, // Not to set any content header
                processData: false, // Not to process data
                success: function (result) {
                    alert(result);
                },
                error: function (err) {
                    alert(err.statusText);
                }
            });
Improve this answer
Sign up to request clarification or add additional context in comments.

2 Comments

I have tried your solution but I get the following error ""File Upload Error form is not defined " why am I getting this error? I have added the code that generates the UI since I think you may needed. Thank you very much for your help.
remove form here: var formDataToUpload = new FormData(form);. i just edited my answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.