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?
This might help you-
basic.croppie('result', {
type: 'canvas',
size: { width: 640, height: 640 }
}).then(function (src) {
window.open(src);
});
Solved by using a different plugin: http://fengyuanchen.github.io/cropper/
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With