1

In my Asp.net MVC project I need to upload an image and crop it and need to display cropped image as profile picture and save it in a folder of the project. I have written the following code to crop an image.Now I want to save the cropped image in a folder of my project,but I don't have any idea how to do it.Can any one help me to how to do this.I am new to programming even I do have an idea of doing this please some one help me.

My .cshtml file is

<link href="~/Content/jquery.cropbox.css" rel="stylesheet" />
<script src="~/Scripts/jquery-1.10.2.js"></script>
<script src="~/Scripts/jquery.mousewheel.js"></script>
<script src="~/Scripts/jquery.mousewheel.min.js"></script>
<script src="~/Scripts/jquery.cropbox.js"></script>

<div id="demo" class="cropbox">


    <!-- Crop buttons -->
    <div class="btn-group">

            <i class="glyphicon glyphicon-folder-open"></i>
            Browse <input type="file" name="File" accept="image/*">

        <button type="button" class="btn btn-success btn-crop">
            <i class="glyphicon glyphicon-scissors"></i> Crop
        </button>

    </div>
    <!-- Crop area -->
    <div class="workarea-cropbox">

        <img class="image-cropbox">

        <br /><br /><br />
        <div class="frame-cropbox">
            <div class="resize-cropbox"></div>
        </div>

    </div>

    <!-- Cropped image -->
    <div class="cropped panel panel-default">

        <div class="panel-body" name="File">...</div>
    </div>

    <!-- Info of cropping -->
    <div class="form-group">

        <textarea class="data form-control" name="hide" style="display:none;"></textarea>

    </div>
</div>
<script>
   $(document).ready(function () {
    $('#demo').cropbox({
        selectors: {
            inputInfo: '#demo textarea.data',
            inputFile: '#demo input[type="file"]',
            btnCrop: '#demo .btn-crop',

            resultContainer: '#demo .cropped .panel-body',
            messageBlock: '#message'
        },

        imageOptions: {
            class: 'img-thumbnail',
            style: 'margin-right: 5px; margin-bottom: 5px'
        },

        variants: [{
            width: 200,
            height: 200,
            minWidth: 100,
            minHeight: 100,
            maxWidth: 800,
            maxHeight: 800
        }, {
            width: 150,
            height: 200
        }],

        messages: [
        'Crop a middle image.'

        ]

    });
});

   </script>
Sowjanya
  • 19
  • 7

1 Answers1

0

If you look close at cropbox documentation on github

A reference to the cropbox object can be accessed like so:

var crop = $('yourimage').data('cropbox');
console.log(crop.result);
Suresh Atta
  • 120,458
  • 37
  • 198
  • 307