Kill Mousewheel Bind Until Called Again

Usage Documentation Demos About

Croppie

Croppie is a fast, like shooting fish in a barrel to use paradigm cropping plugin with tons of configuration options!

          <div class="demo"></div> <script> $('.demo').croppie({     url: 'demo/demo-1.jpg', }); </script> <!-- or even simpler --> <img class="my-image" src="demo/demo-1.jpg" /> <script> $('.my-image').croppie(); </script>                  

NPM:

            npm install croppie          

Bower:

            bower install croppie          

Download:

Source

---

Then add the following elements to your page:

            <link rel="stylesheet" href="croppie.css" /> <script src="croppie.js"></script>          

You can initialize Croppie with the following code:

            var c = new Croppie(certificate.getElementById('item'), opts); // phone call a method c.method(args);          

Or y'all can utilise jquery

            $('#detail').croppie(opts); // call a method via jquery $('#detail').croppie(method, args);          

Options

• boundary object

  The outer container of the cropper

  Default will default to the size of the container
• customClass string

  A course of your choosing to add to the container to add custom styles to your croppie

  Default ''
• enableExif boolean

  Enable exif orientation reading. Tells Croppie to read exif orientation from the image data and orient the image correctly before rendering to the page.

  Requires exif.js

  Default false
• enableOrientation boolean

  Enable or disable back up for specifying a custom orientation when bounden images (Encounter bind method)

  Default false
• enableResize boolean

  Enable or disable support for resizing the viewport area.

  Default imitation
• enableZoom boolean

  Enable zooming functionality. If set to fake - scrolling and pinching would not zoom.

  Default true
• enforceBoundary boolean * Experimental

  Restricts zoom so image cannot be smaller than viewport

  Default true
• mouseWheelZoom bool/string

  Enable or disable the ability to utilise the mouse wheel to zoom in and out on a croppie case. If 'ctrl' is passed mouse wheel will but piece of work while control keyboard is pressed

  Default true
• showZoomer boolean

  Hibernate or Bear witness the zoom slider

  Default true
• viewport object

  The inner container of the coppie. The visible part of the image

  Default { width: 100, height: 100, type: 'square' }

  Valid type values: 'square' 'circumvolve'

Methods

• get() object

  Become the crop points, and the zoom of the prototype.

• bind({ url, points, orientation, zoom }) Promise

  Bind an image to the croppie. Returns a promise to exist resolved when the paradigm has been loaded and the croppie has been initialized.

  Parameters
  
  • url URL to image
  • points Assortment of points that translate into [topLeftX, topLeftY, bottomRightX, bottomRightY]
  • zoom Apply zoom after image has been leap
  • orientation Custom orientation, applied after exif orientation (if enabled). Merely works with enableOrientation option enabled (see 'Options').
    Valid options are:
    • 1 unchanged
    • 2 flipped horizontally
    • 3 rotated 180 degrees
    • 4 flipped vertically
    • v flipped horizontally, and then rotated left by 90 degrees
    • 6 rotated clockwise by 90 degrees
    • 7 flipped horizontally, then rotated right by xc degrees
    • viii rotated counter-clockwise by 90 degrees
• destroy()

  Destroy a croppie instance and remove it from the DOM

• event({ type, size, format, quality, circle }) Promise

  Go the resulting crop of the prototype.

  Parameters
  
  • type The type of result to render defaults to 'sail'
  • 'base64' returns a the cropped image encoded in base64
  • 'html' returns html of the image positioned inside an div of hidden overflow
  • 'blob' returns a blob of the cropped image
  • 'rawcanvas' returns the canvas element allowing you to dispense prior to getting the resulted image
  • size The size of the cropped image defaults to 'viewport'
  • 'viewport' the size of the resulting prototype will exist the same width and height equally the viewport
  • 'original' the size of the resulting prototype will exist at the original scale of the image
  • {width, pinnacle} an object defining the width and height. If only 1 dimension is specified, the other will be calculated using the viewport aspect ratio.
  • format Indicating the image format.
  • Default: 'png'
  • Valid values: 'jpeg'|'png'|'webp'
  • quality Number between 0 and 1 indicating paradigm quality.
  • Default: one
  • circle force the result to be cropped into a circumvolve
  • Valid Values: true imitation
• rotate(degrees)

  Rotate the prototype by a specified degree corporeality. Only works with enableOrientation option enabled (run into 'Options').

  • degrees Valid Values: ninety, 180, 270, -90, -180, -270
• setZoom(value)

  Set the zoom of a Croppie instance. The value passed in is nevertheless restricted to the min/max set by Croppie.

  • value a floating bespeak to calibration the epitome inside the croppie. Must be between a min and max value set by croppie.

Events

• update(croppie) Croppie

  Triggered when a drag or zoom occurs

                                        $('.my-croppie').on('update.croppie', function(ev, cropData) {}); // or document.getElementById('another-croppie').addEventListener('update', role(ev) { var cropData = ev.item; });                                  

Basic Example

                          var basic = $('#demo-basic').croppie({     viewport: {         width: 150,         tiptop: 200     } }); bones.croppie('demark', {     url: 'demo/cat.jpg',     points: [77,469,280,739] }); //on push button click basic.croppie('result', 'html').and then(function(html) {     // html is div (overflow hidden)     // with img positioned inside. });          

x

Vanilla Example

                          var el = certificate.getElementById('vanilla-demo'); var vanilla = new Croppie(el, {     viewport: { width: 100, elevation: 100 },     purlieus: { width: 300, height: 300 },     showZoomer: false,     enableOrientation: true }); vanilla.demark({     url: 'demo/demo-2.jpg',     orientation: four }); //on button click vanilla.issue('blob').then(function(blob) {     // practice something with cropped blob });          

Resizer Example

                          var el = document.getElementById('resizer-demo'); var resize = new Croppie(el, {     viewport: { width: 100, height: 100 },     boundary: { width: 300, top: 300 },     showZoomer: false,     enableResize: true,     enableOrientation: true,     mouseWheelZoom: 'ctrl' }); resize.bind({     url: 'demo/demo-2.jpg', }); //on button click resize.result('blob').and so(part(blob) {     // do something with cropped hulk });          

Upload Instance (with exif orientation compatability)

                              $uploadCrop = $('#upload-demo').croppie({     enableExif: true,     viewport: {         width: 200,         height: 200,         blazon: 'circle'     },     boundary: {         width: 300,         peak: 300     } });            

Upload a file to start cropping

Image Hosting & Cross Origin Errors

Croppie uses sheet.drawImage(...) to manipulate images. Thus, images must obey the CORS policy. More info tin be found here.

Visibility and Binding

Croppie is dependent on information technology's container being visible when the bind method is called. This tin can be an issue when your croppie component is within a modal that isn't shown. Allow'south take the bootstrap modal for example..

                              var myCroppie = $('#my-croppie').croppie(opts); $('#my-modal').on('shown.bs.modal', function(){      myCroppie.croppie('bind', bindOpts); });                          

If you are having problems getting the correct crop result, and your croppie instance is shown within of a modal, try taking your croppie out of the modal and run into if your issues persist. If they don't, so make certain that your bind method is called after the modal is done animating.

Croppie is supported in the post-obit browsers:

• Firefox 10+
• Chrome 12+
• IE 10+
• Border
• Safari four+
• Opera 15+
• iOS
• Android

Croppie was built by Foliotek for use in Foliotek Presentation.

Please submit any issues or questions on Github.

Check out some of our other open up source tools: AjaxQ | LTI Tester

lempriererembes.blogspot.com

Source: https://foliotek.github.io/Croppie/

Share this post