Croppie: How to implement the upload example? Documentation is insufficient

[shahidkarimi]

Expected Behavior

Actual Behavior

Steps to Reproduce the Problem

1.
1.
1.

Example Link

Please recreate your issue using JSbin, JSFiddle, or Codepen.

• Link:

Specifications

• Browser:
• Version:

[thedustinsmith]

All the code on the demo's page is on github. The upload code can be found here: https://github.com/Foliotek/Croppie/blob/master/demo/demo.js

Take note, that this is only client side upload. When it comes to sending the cropped result to your server, it depends a lot on what language you're using on the server. A simple google search of "uploading base64 images [insert your language here]" should get you started.

[craiggeil]

Where is the html source code for the demo?

[thedustinsmith]

https://github.com/Foliotek/Croppie/blob/master/index.html

[105174]

I don’t understand nothing o_O. I need an example ...

[seojake]

This has super insufficient documentation.

[cyjobes]

Yes, documentation is lacking. I'm still trying to find something to get me started. So far nothing. Looking at the example demo.js is not very telling either. It's evident that the person writing the docs cannot see or write from the point of view of users. I'll give it about another 15 minutes of looking around for someone who posted a real-life working example. Otherwise this whole thing gets a thumbs down.

[bret-miller]

I use a calculated height and width, but you could use numbers instead of vpw, vph.

Set up the croppie area
$('#image-crop-container img').croppie({ //url:img, enableOrientation:1, viewport:{width:vpw,height:vph,type:'square'} });

I have buttons for rotate and save.
`
function gciRotateImageRight(){
$('#image-crop-container img').croppie('rotate',-90);
}

function gciRotateImageLeft() {
$('#image-crop-container img').croppie('rotate',90);
}

function gciGetCroppedImage() {
var infostr=$('#image-info').val(); //which+','+aspect+','+expectedsize (w x h)
var info=infostr.split(',');
var imgsize=info[2].split(' x ');
$('#image-crop-container img').croppie('result',{type:'base64',size:{width:imgsize[0],height:imgsize[1]},format:'png'}).then(function(r) {
gciSaveImage(r);
; });
}
`
This passes the base64 image data to the gciSaveImage function. you could just process the data in the inline function instead.

Does that help?

[belowyellow]

It's now 2020 but the documentation is still awesome like before! Thumbs down!