Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Croppie: image bigger than viewport

I'm using https://github.com/Foliotek/Croppie to crop images:

var basic = $('#demo-basic').croppie({
            viewport: {
                width: 640,
                height: 640
            },
            boundary: {
                width: 640,
                height: 640
            },
            showZoom: false
        });

        basic.croppie('bind', {
            url: 'image.jpg'
        });

I need a resulting image size of 640*640 and I'm only using image that are bigger than 640*640, this works perfectly if I set the result to

 basic.croppie('result', {
                type: 'canvas',
                size: 'viewport'
            }).then(function (src) {
                window.open(src);
            });

How could I solve this on a mobile screen (with a screen width of like 320px)? The resulting image still has to be 640*640 and has to be the image the user actually sees while cropping (preview). I tried changing the viewport or the boundary parameters but the resulting image differs from the one the user sees while cropping (preview).

TLDR: How can I crop images, where both the original image and the cropped image are bigger than the screen width?

like image 369
NthDegree Avatar asked Feb 07 '23 23:02

NthDegree


2 Answers

This might help you-

basic.croppie('result', {
            type: 'canvas',
            size: { width: 640, height: 640 }
        }).then(function (src) {
            window.open(src);
        });
like image 51
Chirag Jain Avatar answered Feb 11 '23 01:02

Chirag Jain


Solved by using a different plugin: http://fengyuanchen.github.io/cropper/

like image 25
NthDegree Avatar answered Feb 10 '23 23:02

NthDegree