cropperjs

Cropper.js image disapears on large images


I use Cropper.js 1.6.2 for scanned image cropping. When I scan a 300dpi image (2550x3300) from scanner the Cropper.js zoom is move content to bottom of page and image disapeared (moved down of the screen). If I scan a 150dpi image (1275x1660) it fits to screeen well.

Please see my screencast here: https://youtu.be/-5YyGmTv_XE

Code is here: https://github.com/pzoli/forras-imageserver/blob/8b49e13259743dd89c58a6e2288aa7c0ee488d46/src/main/resources/static/main.js#L29

    image.addEventListener("load", (e) => {
        canvas.width = image.width;
        canvas.height = image.height;
        ctx.drawImage(image, 0, 0);
        cropper = new Cropper(canvas);
    });

WebSocket server code is here: https://github.com/pzoli/ForrasAdminScannerWebsocket

Thanks for suggestions!


Solution

  • I found a solution for visibility problem:

            cropper = new Cropper(canvas,{
                ready()
                {
                    this.cropper.moveTo(0, 0);
                    const canvasData = this.cropper.getCanvasData()
                    this.cropper.setCropBoxData({left:0,top:0,width:canvasData.width,height:canvasData.height})
    
                }
            });