Love your extensive documentation - but especially all the functionality built into this cropper!
BUT - for the life of me I cannot get it to work inside an ASP MVC application!
I've worked iwth java script for years - and typically can take such projects like this and incorporate into my web applications - but not so here...
I've tried everything from the "quick start" suggested - to importing everything from the demo project - being sure to check css and script links etc..... but I STILL can't get it to work - and always (whatever my approach) get the dreaded "cropper is not a function".
Is there any way you you possibly help me? I'd love to use this cropper if at all possible.
Thanks so much!!!
Wayne Fair
////////////////////////////
UPDATE:
I DID get it to work sort of...
But what I have discovered is that if I put any of the method calls inside another function - I still get the "cropper is not a function"
Like:
function btnClicked() {
$().cropper('getCroppedCanvas');
$().cropper('getCroppedCanvas', {
width: 160,
height: 90
});
};
hwaynefair
All 17 comments
I think you don't use it correct.
fengyuanchen
on 29 Jun 2015
Without a doubt, you are correct, Chen.
I am much to much of a hack when it comes to java script.
Most stuff works when I use it - but I think my problems with cropper have to do with understanding scope, closures - etc.
I do have it working fully now - and thank you for responding to my queries.
It's a brilliant piece of work - thanks for sharing it with the world :)
hwaynefair
on 29 Jun 2015
Thank you too @hwaynefair.
fengyuanchen
on 29 Jun 2015
You could at least have shown what you did to make it work :(
solenark
on 1 Oct 2015
@Solenark Yeah I'm having the same problem. Have you resolved it?
@hwaynefair any insight?
bobby2525
on 17 Feb 2016
It's been so long since I either figured it out - or (more likely) stumbled into a solution (through trial and error) which I may have never understood...
I think this usually happens when the reference (to the javascript library) in your code is not placed correctly - in the right order, etc.
I also think that the solution may have had something to do with how I was instantiating the local instance of the cropper object.
Sometimes it helps just to start all over with the most simplified project - and try to get the implementation working....
Wish I could be more help - but I am at work.... Let me know if you don't get a break through - maybe I will have time later to go back and dig up my code....
Thanks!
wayne
From: bobby2525 <[email protected]>
To: fengyuanchen/cropper [email protected]
Cc: Wayne Fair [email protected]
Sent: Wednesday, February 17, 2016 11:27 AM
Subject: Re: [cropper] cropper is not a function (#364)
@Solenark Yeah I'm having the same problem. Have you resolved it?@hwaynefair any insight?—
Reply to this email directly or view it on GitHub.
hwaynefair
on 17 Feb 2016
So what was the solution? I'm having the same issue. Even with a fresh page with nothing else going on but the image I want to use the plugin on, following the quickstart instructions yields the "cropper is not a function" error. Below is the page in its entirety. If anyone can spot what I'm doing wrong I'd appreciate it.
<html>
<head>
<script src="~/public/plugins/jquery/jquery-2.1.1.js"></script>
<link href="~/public/css/cropper/cropper.min.css" rel="stylesheet" />
<script type="text/javascript" src="~/public/plugins/cropper/cropper.min.js"></script>
<style>
img {
max-width: 100%;
}
</style>
</head>
<body>
<h2>Photo</h2>
<div>
<img id="CropMe" src="~/images/compatsettings.jpg" />
</div>
<script type="text/javascript">
$("#CropMe").cropper({
aspectRatio: 16 / 9,
crop: function (e) {
// Output the result data for cropping image.
console.log(e.x);
console.log(e.y);
console.log(e.width);
console.log(e.height);
console.log(e.rotate);
console.log(e.scaleX);
console.log(e.scaleY);
}
});
</script>
</body>
</html>
Dromaeosaur
on 30 Apr 2016
Be sure to download the correct package with npm install cropper.
Please don't use this npm install cropperjs as Cropper.js is not a jQuery plugin.
fengyuanchen
on 30 Apr 2016
/headdesk. Yeah, that did it. Thanks.
Dromaeosaur
on 2 May 2016
There are apparently two versions of Cropper - one for jquery and one for non-jquery. The readme says to use bower install cropperjs but doesn't mention the alternate version. Everything worked well for me until I went to use setCropBoxData, then I kept getting not a function errors. Doing bower install cropper and tweaking the script paths got things working again.
shacker
on 7 Mar 2017
Hi am using jquery cropper.js but still am facing the issue .... I was trying in the sample which you given , I juz replaced the path ,I got error like $image.cropper({ is not a function ..,please help me out
gomathi04
on 26 Mar 2017
I had the same Error, for me it was being lazy by pasting the ,js rel into css and vise versa ^-^
DanielEberl
on 12 Jan 2018
.cropper is working nicley in local setup.
but when i use in live than i get to error like this .cropper is not a function error.
So any one have soluction for this error.
Please help me.
meddev001
on 13 May 2018
It's been so long since I used this cropper and I can't remember what the problem resolution was to get rid of that error. I'm fairly certain it had to do with versioning of JQuery. Sorry I can't be more help @meddev001
bobby2525
on 24 May 2018
Lmao looking at the other comments this seems to be a trend of figuring it out, and immediately forgetting the solution
bobby2525
on 24 May 2018
i have same issue ,when i am using requirejs , cropper is undefined.
nasservb
on 17 Dec 2019
- For CommonJS:
var $ = require('jquery');
require('cropper/dist/cropper.common.js');
// require('cropper/dist/cropper.css'); // requires css loader if you are using webpack
- For ES6 Module:
import $ from 'jquery';
import 'cropper/dist/cropper.esm.js';
// import 'cropper/dist/cropper.css'; // requires css loader if you are using webpack
- For browser side:
<script src="/path/to/jquery.js"></script><!-- jQuery is required -->
<link href="/path/to/cropper.css" rel="stylesheet">
<script src="/path/to/cropper.js"></script>
Related issues
Kendokai
·
4Comments
ghengeveld
·
3Comments
zilions
·
3Comments
SimonBriche
·
7Comments
WillJW
·
3Comments
Most helpful comment
Hi am using jquery cropper.js but still am facing the issue .... I was trying in the sample which you given , I juz replaced the path ,I got error like $image.cropper({ is not a function ..,please help me out