White image in the canva.

[GabrielLimardo]

I'm using the Jcrop library to crop images in my web app and everything works fine except when I try to export the cropped image to a PDF file. It turns out that if I use the Jcrop library to crop the image, the image in the resulting PDF appears as a blank image. If I comment out everything related to Jcrop, the image displays correctly on the canvas.

I've gone through my code and can't find the problem. I am using the latest version of Jcrop and I am exporting the cropped image using the jsPDF library.

Has anyone experienced a similar problem and found a solution? Is there a way to prevent Jcrop from causing this problem when exporting the image to a PDF file?

I appreciate any help or suggestion.

Coordinate generation

        <div class="col-12 mt-2">
            <label class="label subtitulo">Generación de coordenadas</label>
            <hr>
        </div>
        
        <div class="col-md-12">
            <label for="file" id="textfile" class="boton_adjuntar"><i class="fas fa-paperclip"> </i> Subir pdf</label>
            <input id="file" type="file" class="form-control" name="file">
        </div>
        <br>
>   <!-- accordion para coordenadas-->
>     <div class="accordion" id="acordionCoordenadas">
>         <div class="accordion-item">
>             <h2 class="accordion-header" id="panelsStayOpen-headingOne">
>                 <button id="ocr-button" class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#panelsStayOpen-collapseOne" aria-expanded="true" aria-controls="panelsStayOpen-collapseOne">
>                     OCR
>                 </button>
>             </h2>
>             <div id="panelsStayOpen-collapseOne" class="accordion-collapse collapse show" aria-labelledby="panelsStayOpen-headingOne" data-bs-parent="#acordionCoordenadas">
>                 <div class="accordion-body">
>                     <div class="d-flex">
>                         <div class="col-md-6 form-floating mb-1">
>                             <input type="int" autocomplete="off" class="col form-control" value="{{ old('c_arriba_izquierda_x') }}" id="c_arriba_izquierda_x" name="c_arriba_izquierda_x" placeholder="Coordenada X punto izquierdo superior">
>                             <label>Coordenada X punto izquierdo superior</label>
>                         </div>
>                         <div class="col-md-6 form-floating mb-1">
>                             <input type="int" autocomplete="off" class="col form-control" value="{{ old('c_arriba_izquierda_y') }}" id="c_arriba_izquierda_y" name="c_arriba_izquierda_y" placeholder="Coordenada Y punto izquierdo superior">
>                             <label>Coordenada Y punto izquierdo superior</label>
>                         </div>
>                     </div>
> 
>                     <div class="d-flex">
>                         <div class="col-md-6 form-floating mb-1">
>                             <input type="int" autocomplete="off" class="col form-control" value="{{ old('c_abajo_derecha_x') }}" id="c_abajo_derecha_x" name="c_abajo_derecha_x" placeholder="Coordenada X punto derecho inferior">
>                             <label>Coordenada X punto derecho inferior</label>
>                         </div>
>                         <div class="col-md-6 form-floating mb-1">
>                             <input type="int" autocomplete="off" class="col form-control" value="{{ old('c_abajo_derecha_y') }}" id="c_abajo_derecha_y" name="c_abajo_derecha_y" placeholder="Coordenada Y punto izquierdo inferior">
>                             <label>Coordenada Y punto derecho inferior</label>
>                         </div>
>                     </div>
>                 </div>
>             </div>
>         </div>
> 
>     </div>
> 
> <div class="box-footer mt20">
>     <button type="submit" class="btn btn-primary">Submit</button>
> </div>

@section('js')

<script>
    let pdfDoc = null,
    pageNum = 1,
    pageRendering = false,
    pageNumPending = null,
    scale = 1,
    canvas = document.getElementById('pdf_canvas'),
    ctx = canvas.getContext('2d');

function generateImage(pageNum) {

    pdfDoc.getPage(pageNum).then((page) => {
        var viewport = page.getViewport({
            scale: 10
        });
        var canvas = document.createElement('canvas');
        var ctx = canvas.getContext('2d');
        canvas.height = viewport.height;
        canvas.width = viewport.width;
        var renderContext = {
            canvasContext: ctx,
            viewport: viewport
        };
        var renderTask = page.render(renderContext);
        renderTask.promise.then(function() {
            var img = canvas.toDataURL('image/png');
            var viewport = page.getViewport({
                scale: scale
            });

            const image = document.getElementById('img')
            image.src = img;
            image.style.width = viewport.width + 'px';
            image.style.height = viewport.height + 'px';

            jcropConfig();

        });
    }).catch(function(error) {
        console.log(error);
    });
}

$('#file').on('change', function(e) {
    e.preventDefault();
    var file = $('#file')[0].files[0].name;
    $(this).prev('label').text(file);

    let url = URL.createObjectURL($('#file')[0].files[0]);

    // load the pdf
    pdfjsLib.getDocument(url).promise.then((doc) => {
        pdfDoc = doc;
        generateImage(1);
    })
});

// jcrop configuration function
function jcropConfig() {

    const jcrop = Jcrop.attach('img', {
        multi: false
    })

    // jcrop configuration
    jcrop.listen('crop.update', (widget, e) => {

        var img = document.getElementById('img');
        var img_width = img.width;
        var img_height = img.height;

        console.log(widget.pos);


        //  si el botón está activo agrego los valores al input
        if ($('#ocr-button').attr('aria-expanded') == 'true') {
            document.getElementById('c_arriba_izquierda_x').value = widget.pos.x;
            document.getElementById('c_arriba_izquierda_y').value = img_height - widget.pos.y;
            document.getElementById('c_abajo_derecha_x').value = widget.pos.x + widget.pos.w;
            document.getElementById('c_abajo_derecha_y').value = img_height - (widget.pos.y + widget.pos.h);
        }

    });