CODEWITHSUNDEEP
jquerycsscrop
vrajesh
vrajesh

Reputation: 2942

simple croppic example jquery

I am working on upload profile picture.

I am using www.croppic.net because it is browser compitible.

I wasted 2 days on it.But I cant get proper example.

I have downloaded whole website link from website footer section.

But after remove unnecessary js/css (Bootstrap,etc.). Still I don't know how it works :D..

Please suggest me any other jquery that provide upload and crop with browser compitible

Upvotes: 0

Views: 2026

Answers (2)

Hamed
Hamed

Reputation: 595

You have to be aware that include all necessary files. I have ran it and post image as Ajax request and save it on the server. Those files are :

  1. croppic.css at Header
  2. include some CSS for your image area, For example you have div tag as parent of your plugin and we called it cropHeaderWrapper and it has overflow:hidden;height: 420px;direction: ltr;
  3. The plugin that i will tell you later
  4. Include https://code.jquery.com/jquery-2.1.3.min.js
  5. Include jquery.mousewheel.min.js
  6. Include croppic.min.js
  7. And initialize it that i will tell you

for case of 3, we have these codes :

<div class="col-xs-12 text-center cropHeaderWrapper">
    <div id="croppic"></div>
    <span class="btn" id="cropContainerHeaderButton">Browse</span>
    <input type="hidden" id="get_img_url">
</div>

For cropHeaderWrapper i told you this is parent of your plugin and then we define div tag and assign an ID called croppic, After that we define a browse key that we have to initialize it in configuration that i explain it and for the last one we have input tag to get our path that image have save on the server.

The Config section consist of these codes :

var croppicHeaderOptions = {
        cropUrl:'Blog/upload_img',
        outputUrlId: 'get_img_url',
        customUploadButtonId:'cropContainerHeaderButton',
        modal:false,
        processInline:true,
        onBeforeImgUpload: function(){ console.log('onBeforeImgUpload') },
        onAfterImgUpload: function(){ console.log('onAfterImgUpload') },
        onImgDrag: function(){ console.log('onImgDrag') },
        onImgZoom: function(){ console.log('onImgZoom') },
        onBeforeImgCrop: function(){ console.log('onBeforeImgCrop') },
        onAfterImgCrop:function(){ console.log('onAfterImgCrop') },
        onReset:function(){ console.log('onReset') },
        onError:function(errormessage){ console.log('onError:'+errormessage) }
}   
var croppic = new Croppic('croppic', croppicHeaderOptions);

cropUrl is the path that you want process your image to save on the server. In this case i worked on MVC and this is the path to that function, You can path it as example.php or what ever. outputUrlId is your path url where image has been saved there. customUploadButtonId is you button for browse images on local.

Please notice that we do not need to upload the image and after that crop it! We can use processInline and set it to true and our image will be uploaded as base64 and after all we need to do on our image we only need to save it on the server. I'm working on this plugin and it works on IE version 8 too. IF you have any question please inform me.

Upvotes: 1

George Plamenov Georgiev
George Plamenov Georgiev

Reputation: 702

The croppic has very good browser compatibility. Download only the clean version. Include one div with the cropicId:

<div id="yourId"></div>

Init the croppic:

    var cropperOptions = {
        uploadUrl:'path_to_your_image_proccessing_file.php'
    }       

    var cropperHeader = new Croppic('yourId', cropperOptions);

I have found that on the div with the yourId you have to use the defauld id from the css #croppic . If you want to change it make it also in the croppic.css.

If you process the files with php download the examples and use them as they have done in the website build example.

Upvotes: 0

Related Questions