0

I have a React app using cropper.js and I have this basic structure

<input type="file" name="imagen1" id="imagen1" accept='.jpg, .png, .jpeg' onChange={handleImg1}/>
                
<cropper-canvas background>
    <cropper-image></cropper-image>
    <cropper-shade hidden></cropper-shade>
    <cropper-handle action="select" plain></cropper-handle>
    <cropper-selection aspect-ratio='1' initial-coverage="0.8" movable resizable zoomable>
        <cropper-grid role="grid" bordered covered></cropper-grid>
        <cropper-crosshair theme-color="rgba(238, 238, 238, 0.5)" centered></cropper-crosshair>
        <cropper-handle action="move" theme-color="rgba(255, 255, 255, 0.35)"></cropper-handle>
        <cropper-handle action="n-resize"></cropper-handle>
        <cropper-handle action="e-resize"></cropper-handle>
        <cropper-handle action="s-resize"></cropper-handle>
        <cropper-handle action="w-resize"></cropper-handle>
        <cropper-handle action="ne-resize"></cropper-handle>
        <cropper-handle action="nw-resize"></cropper-handle>
        <cropper-handle action="se-resize"></cropper-handle>
        <cropper-handle action="sw-resize"></cropper-handle>
    </cropper-selection>
</cropper-canvas>
        
<button onClick={saveImg1} type="button">SAVE</button>

The input onClick is getting the uploaded file and rendering to the like this:

const renderImg = (canvas, e)=>{
    var tgt = e.target || window.event.srcElement,
    files = tgt.files;
    if (FileReader && files && files.length) {
        var fr = new FileReader();
        fr.onload = function () {
           canvas.src = fr.result;
        }
        fr.readAsDataURL(files[0]);
    }
}

The user can manipulate the selection as expected, great... but now when I finish I don´t know how to get that actual selection to save it/upload it/whatever. How do I get that selection made by the user?

Pizzaboy
  • 331
  • 2
  • 14
  • https://github.com/fengyuanchen/cropperjs/blob/main/README.md#getdatarounded – CBroe Jul 27 '23 at 11:21
  • Where should I use that getData() @CBroe? I mean, I create a new Cropper() with the but getData() gives me an error (cropper.getData is not a function) Pretty confused about this. – Pizzaboy Jul 27 '23 at 14:31
  • What is that `` thing, is that from this library? https://github.com/react-cropper/react-cropper#quick-example – CBroe Jul 28 '23 at 06:28
  • Not sure if it´s the same version but it´s the same library... https://fengyuanchen.github.io/cropperjs/v2/api/cropper-canvas.html – Pizzaboy Jul 28 '23 at 07:55

0 Answers0