foliotek / croppie Goto Github PK

Hey, just wanted to let you know that if a max-width: 100% is set for all images ( the way it happens with most responsive websites ) the zoom value read by Croppie is wrong so maybe adding a max-width: none; to the styles would help prevent that.

Other then that, the plugin is awesome!

Maybe it is obvious to everyone else, but it would be nice to see the HTML file in the demo directory. That would get me off to a quick start.

If you call bind with an image that is different than the initial image, zooming in and out becomes unstable.

Seems like it'd be good to have a Transform "class" to work with.

Something like:
var t = new Transform(element or string or object)

Properties

t.x;
t.y;
t.scale

Methods

t.toCssMatrix(); //matrix(scale, 0, 0, scale, x, y)
t.toCssTransform(); //scale(scale) translate(x, y);

Hi, thanks for the plugin

I'm facing an issue at the moment. I need to style the zoom slider with js as default css doesn't work in my case (i need a different color for the filled part of the range, but i can't achieve it in webkit browsers with the help of css).

I tried two different plugins for styling range input with jquery and none of them worked. The slider is generated, but real range value isn't changed, and as a result the image isn't zoomed in/out. But the plugins work okay with an ordinary input(if you make the real input visible, you can see it)
see fiddle here (now it uses rangleslider.js but I tried formstone as well, the same result)
https://jsfiddle.net/ohn1xbn1/7/
I also tried to call rangeslider after image change
https://jsfiddle.net/ohn1xbn1/8/
and also with setTimeout
none of them works

What can I do

Regards
Lusine

We only initialize the zoom logic if showZoom is true. Should we initialize the zoom logic if showzoom || mousewheelzoom

Very strange issue. When Croppie is in a form that has JQuery validation, the slider in croppie always fails with the message:
Please enter a value between true and [object HTMLInputElement]

I've tested this with Firefox, Edge and Chrome. For a test I simply pasted your Basic example in a form that had some validation and sure enough it failed. Note that the croppie control does not have any validation attached to it.

By the way, I also found an odd error with panning. When I pan an image, and then release it, a compatibility problem occurs with the control SummerNote. In summerNote, text selection stop working. I traced it to the mouse down and mouse up events and commented out:
//document.body.style[CSS_USERSELECT] = 'none';
in each method and that fixed it.

As I'm new to Javascript (I programmed for years in C# but I'm < 6 months with JS) I not sure that's the right fix, but I figure it would point you in the right direction.

Hi
I'm facing such an issue on iPhone 6s (iOS 9.2)
I want to show the crop result by replacing the src attribute of an existing tag. It works okay everywhere except iOS
I entered html structure and js code in this fiddle but it's not complete enough to see the result https://jsfiddle.net/n9bnkhma/
You can see the working demo here. http://kadmos.li/lus/and/well/t1.html
By the way, it works okay, when I bind a photo instead of uploading it in such a way
img = new Image();
img.setAttribute('crossOrigin', 'anonymous');
img.src = $("#cropResult").attr("data-img-original");
$uploadCrop.croppie('bind', {
url: img.src,
points: [4 points here],
});

Thanks in advance for helping with this issue

Regards
Lusine

We should discuss what we like and what we don't like, what we want to change, what we need to add, etc.

We should also Document the configuration options, events, methods a little better on the index site.

Generating a result via canvas creates a data/image which correctly contains the viewport selected, however, the actual image dimensions do not match. Could the created canvas have the same dimensions as the viewport? This would eliminate the need for re-sizing.

Native sliders look like crap. Maybe we can come up with a neutral one?

How to set initial zoom value?.When I am selecting an image it is showing zoomed. I want to decrease the zoom value.I think initially it is set to max value. But, I want to set it to minimum value.How do I do that?
I have tried with setZoom option. It didn't work for me.Example I tried:

$uploadCrop = $('#upload-demo').croppie({
        viewport: {
            width: 200,
            height: 200,
            type: 'square'
        },
        boundary: {
            width: 700,
            height: 300
        }

    });

 $uploadCrop.croppie 'setZoom', 0.5

Using version 4.4.2.
Moving fine horizontally.
Moving fine in both directions in Chrome on Android, but not in the default browser.

If you zoom totally out on some images, firefox gives an error when you want to get the image.

Line 159:
ctx.drawImage(img, left, top, width, height, 0, 0, outWidth, outHeight);

Before that I added:
width = Math.round(width);
height = Math.round(height);
outWidth = Math.round(outWidth);
outHeight = Math.round(outHeight);

And now it works :-)

If the browser window has scroll bars, and you drag the image high enough to make the window scroll, it scrolls the page and screws up all of our calculations, placing the viewport outside of the image.

The min-value of the slider is often up to 16 digits after the comma like
0.3125077572614787.

In Firefox this will cause a error like shown in the screenshot. Could you cap it to a specific amount of digits after the comma?

Chrome seems to work with it though.

This is a great library, would be even better with support for chaining :)

We are using requier.js in our application. On initing croppie.js we have an error 'b.js could not be found'.
For proper initialization we had to remove lines 9-11 and after that it started.

lines 9-11:
'if (typeof define === 'function' && define.amd) {
// AMD. Register as an anonymous module.
define(['exports', 'b'], factory);
} else
'

See this example:

I moved the original image so that the face is centered on the viewport, but the resulting cropped image was shifted.

The bug was noticed in mobile Chrome only (Chrome 47, Android 4.4.2). Works fine in the desktop Chrome for Windows and in the default Android browser.

The original image was a 1.12MB jpeg file, 3120 x 4160px.

The example screenshot above is from my application, but it is the same on your site using the Upload example.

Very small image in case of el.croppie ('bind', src) where src is uri.
Look on a screenshot.

I decided adding of the minimum value for zoomer

        wrap.classList.add ('cr-slider-wrap');
        zoomer.type = 'range';
        zoomer.classList.add ('cr-slider');
        zoomer.step = '0.01';
        zoomer.min = 0.5;
        zoomer.value = 1;

Forgive me for my English

Doesn't work when you get to some parts of the image.

• user-select
• transform
• transform-origin
• any others?

I am on Windows 10, using Firefox 43.0.3

Hitting the "Upload" button on the demo page doesn't seem to work on my machine. No dialogue box opens for me and I am not prompted to select any file or image.

It seems to be working fine for Chrome, Opera and whatever Microsoft is calling its browser these days.

Hey! I noticed the wheel zooming is not working on Firefox (39.0).

That happens because the event DOMMouseScroll hasn't ev.deltaY.

So I made a validation to get the correct delta data.

Can I PR this?

function scroll(ev) {
    var delta, targetZoom;

    if (ev.wheelDelta) {
        delta = ev.wheelDelta / 1200; //wheelDelta min: -120 max: 120 // max x 10 x 2
    } else if (ev.deltaY) {
        delta = ev.deltaY / 1060; //deltaY min: -53 max: 53 // max x 10 x 2
    } else if (ev.detail) {
        delta = ev.detail / 60; //delta min: -3 max: 3 // max x 10 x 2
    } else {
        delta = 0;
    }

    targetZoom = self._currentZoom + delta;

    ev.preventDefault();
    start();
    _setZoomerVal.call(self, targetZoom);
    change();
}

Hi Everyone,

Before getting into the question, I just wanted to say thanks for the great work on this project. It's a very useful library that seems to be gaining much traction, can't wait to see where it goes!

I'm using the latest version - 1.0.3 - and when uploading a photo from an iPad I'm noticing an empty base64 string returned when calling:
croppie.result('canvas').then(function(result) { //code } );

After digging around, I'm seeing this effect only when (A) portrait-oriented photos have been uploaded by an iPad (B) the image has either been zoomed-out or panned so that its right and bottom borders are evenly-aligned (flush) with the right and bottom sides of the viewport. (test case images attached)

Has anyone else experienced this issue? I did see issue #31 , and have implemented the suggested solution without any luck.

Any thoughts or direction would be awesome, thanks again

Zoomed out

Panned, zoomed-in

Results

I first init a croppie by
var basic = $('.container').croppie({ viewport: { width: 200, height: 100 }, boundary: { width: 250, height: 150 } });
then bind it to an image.
When binding it to a different one later how can I change the viewport and boundary afterwards?

Thanks in advance and great job on croppie!

Uncaught (in promise) DOMException: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported

Pls add for CORS

img.setAttribute('crossOrigin', 'anonymous');

I have croppie working on mobile iOS 9.2, but I am having some challenges getting what I want...

My viewport is 260x260, square and the boundary is 300x300. When I load an image from on my phone that is, say 960x1260 (the default), it does not scale down and with the zoom all the way left, it is still to close up to make any details out.

You can see the same results on the demo page's upload example.

Digging in with Safari's web inspector, it looks like iOS is giving a "Cross-Origin Resource Sharing policy error" in loadImage so img.onload never fires to resolve the promise and _updatePropertiesFromImage never gets called. If I manually call _updatePropertiesFromImage, the image looks correct.

Checking around the internet, I am thinking that
img.setAttribute('crossOrigin', 'anonymous');
should be...

if(src.substring(0,4).toLowerCase()==='http') {
    img.setAttribute('crossOrigin', 'anonymous');
}

It should be usefull if the update event was debounce too on mouseWheelZoom / drag zoom slider. I have implemented that to my own purpose, but it should good for everyone ?

update: utils.debounce(function(cropper) {
    console.log('update : ' , cropper);
    // Now we refresh the result
    $uploadCrop.croppie('result', {
        type: 'canvas',
        size: 'viewport'
    }).then(function (resp) {
        var $attachmentSubmit = $('.attachment.attachment-output');
        if ($attachmentSubmit.next('img').length) {
            $attachmentSubmit.next('img').attr('src', resp);
        } else {
            $attachmentSubmit.after('<img src="' + resp + '" />');
        }
    });
})

Using the images from https://github.com/recurser/exif-orientation-examples
You can see that Croppie doesn't display the images in the canvas in the way that they would be seen in for example Preview on a Mac.

Javascript Promise() does not supported by IE browser.

Is it possible to change the length of the slider?

any way you can add options to restrict uploads to only images? or maybe include this code via demos...

it work perfect for my android phone
then I try on my iphone
but it cant drag or zoom the image

i want to give default zoom value at the time of initializing or after initialization ?

could you help me with that.?

Hey,

box-shadow on .cr-viewport element don't work on Safari (desktop and mobile) latest verion. Working fine when you set box-shadow on "smaller" value (800px). Above this value shadow don't work.

Phone: Motorola Nexus 6 (6 inch screen), Android (latest build)
Browser: Chrome (latest build)

Issue: when cropping an image the result will more often than not have white lines across it. Sometimes they are vertical sometimes horizontal, sometimes both. This occurs on my own application but also when i upload something to your test page.

Thank you very much for your help in fixing this.

I found a bug in croppie.js from line 340 to 358. four if is so terrible, i can not understand it.
absolutely i know in my code the transBoundaries.minX > transBoundaries.maxX, four if will be run.

if i comment those if, everything is OK.

To Show this question. You can find my code here: https://github.com/tosone/tosone.github.io.git
and https://tosone.github.io/, click 头像, you will find it.

Thank You! I want to know why.

Need to be able to set top and left when binding an image.

The question is - should we also set a bottom & right or do we take in an image scale?

• Clean Styling
• Provide more demos with different configurations?

Hi for some reason in Safari with extension AdBlock Plus
croppie cannot get size of image, I did fix it with weird way, replace call
_updatePropertiesFromImage.call(self);
with
setTimeout(function(){
_updatePropertiesFromImage.call(self);
},1);
in _bind
hope that's will help figure out what's conflict with AdBlock