javascript,jquery,html,css,jcrop
Rather than setting the dimensions of your image in CSS, jcrop has boxWidth and boxHeight parameters for this purpose. Using these parameters, jcrop will resize the image to fit in the specified box size, but it will still output values relative to the true size. You can set them like...
php,image,file-upload,png,jcrop
imagecreatetruecolor() creates an image filled with opaque black. Unless you fill your new image with transparency first, the black will show through later. All you need is an imagefill() with a transparent colour - namely black, like this: imagefill($dst_r,0,0,imagecolorallocatealpha($dst_r, 0,0,0,127)); // transparency values range from 0 to 127 Applied to...
http://jsfiddle.net/wr2er0Lj/ You are set Jcrop not correct, try it....
javascript,jquery,image,crop,jcrop
Ekhm :D There is such an option in jcrop :) http://deepliquid.com/content/Jcrop_Manual.html#Setting_Options minSize : array [ w, h ] : Minimum width/height, use 0 for unbounded dimension n/a ...
The API functions you mention at least at the 0.9.12 version of the plugin.. jcrop_api.tellSelect() returns an object like this: { x: 0, y: 0, x2: 10, y2: 10, w: 10, h:10 } and jcrop_api.animateTo needs one array like [x,y,x2,y2], so, try this: var c = jcrop_api.tellSelect(); jcrop_api.animateTo([c.x,c.y, c.x2, c.y2]);...
jcrop and FileReader() both are the frontend browser library or api,while gb lib is the php backend library. I have to two solutions FYI. jcrop+FileReader() for user crop the image,and then frontend get new the cropped image's data like {x:50,y:100,width:100,height:200} relative to original image,which will be posted to backend for...
What you would do here is pass an anonymous function and within it, you can call the other functions you want. It would look something like this: $('#crop-me').Jcrop({ ... onChange: function(){ showCoords(); updatePreview(); }, ... }); If you want to persist all of the arguments passed to the functions, you...
javascript,html5,image,canvas,jcrop
Not any more. (Link to enabling CORS on server: http://enable-cors.org/) Not any more. Yes. Annotated code example: http://jsfiddle.net/m1erickson/gz6e8/ Once you have properly configured your server for CORS you can download an image that won't taint your canvas like this: var img=new Image(); img.crossOrigin="anonymous"; img.src="http://yourConfiguredServer.com/logo.png"; Illustration of the results: ...
Well the fast way is to use an object, that containts the jcrop_api and other information about it. In this way: var jCrop={ initialized:false, } function initJcrop($width, $height) { $('#jc_image').Jcrop({ allowSelect: false, allowMove: true, aspectRatio: $width/$height, },function(){ jCrop.initialized=true; jCrop.jcrop_api = this; jcrop_api.animateTo([0,0,$width, $height]); }); }; After that, you can check...
This is how I remove Jcrop from element so I can use it with another image. if ($('#target').data('Jcrop')) { $('#target').data('Jcrop').destroy(); } ...
ruby-on-rails-4,jcrop,cloudinary
You can either resize the image via Jcrop and upload the cropped image to Cloudinary, or have the coordinates returned by Jcrop and pass them to Cloudinary to crop the image as an incoming transformation.
You should handle it by selecting image by their Id ,you should do it by replacing this line var $this = this.ui.holder; by this one : $('#original') and get the height and width for the image , this will solve your issue....
Use is trueSize option when creating jcrop passing it an array of the original image size [500,300] <script> $(window).load(function() { $.Jcrop('#cropbox',{ trueSize: [500,370] }); }); </script> and for it image tag <img src="test.jpg" width="400" /> for more details see jcrop help page about this topic....
jquery,ruby-on-rails,firefox,jcrop,cloudinary
It was a problem with turbolinks. I added the jquery.turbolinks gem and put in document.ready at the start of the javascript.