GX Cropper

This is a cropper of images for genexus.

Node Modules

• Run npm install gx-cropper --save
• Then you can use the element anywhere in your template, JSX, html etc

Example

  <gx-cropper src="http://somesite.com/images/some_image.jpg" width="200" height="200" show-behavior="inline" >
    <span slot="header">Recortar imagen</span>
    <button slot="primary-action" onclick="getImage()">Obtener Imagen</button>
  </gx-cropper>

  <script>
    let cropper = null;
    window.addEventListener('load', () => {
      cropper = document.getElementsByTagName('gx-cropper')[0];      
    }, false);

    function getImage(){
        if(cropper){
          cropper.getLastCropImage().then((dataurl)=>{
            // #preview is a <img>
            document.getElementById("preview").src = dataurl;
          });
        }
      }
  </script>  

Links to docs

• gx-cropper
• gx-cropper-image
• gx-cropper-selection