foliotek / croppie Goto Github PK
View Code? Open in Web Editor NEWA Javascript Image Cropper
Home Page: http://foliotek.github.io/Croppie
License: MIT License
A Javascript Image Cropper
Home Page: http://foliotek.github.io/Croppie
License: MIT License
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.
This is a great library, would be even better with support for chaining :)
If you call bind with an image that is different than the initial image, zooming in and out becomes unstable.
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!
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.
it work perfect for my android phone
then I try on my iphone
but it cant drag or zoom the image
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.
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
'
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.
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.
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.
any way you can add options to restrict uploads to only images? or maybe include this code via demos...
Uncaught (in promise) DOMException: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported
Pls add for CORS
img.setAttribute('crossOrigin', 'anonymous');
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
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.
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();
}
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.
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');
}
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
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!
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
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
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 + '" />');
}
});
})
Doesn't work when you get to some parts of the image.
Javascript Promise() does not supported by IE browser.
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.
We only initialize the zoom logic if showZoom
is true. Should we initialize the zoom logic if showzoom || mousewheelzoom
Is it possible to change the length of the slider?
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?
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
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.
Using version 4.4.2.
Moving fine horizontally.
Moving fine in both directions in Chrome on Android, but not in the default browser.
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.
Native sliders look like crap. Maybe we can come up with a neutral one?
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
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 :-)
i want to give default zoom value at the time of initializing or after initialization ?
could you help me with that.?
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
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.