Menu
  • HOME
  • TAGS

Jcrop Large Image True Size

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...

Upload png image black background

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...

Cropping image drawn into canvas with JCrop

jquery,html5,canvas,jcrop

http://jsfiddle.net/wr2er0Lj/ You are set Jcrop not correct, try it....

Setting a minimum height and width on JCrop

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 ...

Getting the Jcrop coordinates back into Jcrop through javascript variable?

javascript,jcrop

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]);...

Which is the better way to manipulate an image, using gd lib or using the FileReader() with Jcrop? [closed]

php,html5,gd,jcrop

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...

Multiple “user option” parameters on the same function

jquery,jcrop

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...

crop canvas html5 to image as base64 on client side without server-side code

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: ...

How to check that jcrop is initialized

jquery,jcrop

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...

Jcrop Handle Destroy

jquery,jcrop

This is how I remove Jcrop from element so I can use it with another image. if ($('#target').data('Jcrop')) { $('#target').data('Jcrop').destroy(); } ...

Rails / Attachinary / Jcrop - save only the cropped image

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.

JCrop when use set select option the plugin broken

javascript,jcrop

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....

How to crop different size images with jcrop

javascript,jquery,jcrop

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....

cloudinary with jcrop working on chrome but not firefox or safari

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.