Crop-image

Mentions

Capture

Description

Crop-image is a simple package that will help you to capture a particular part of your image. this package is good if you want to manage certain part and resize a user profil. This package is lite. it has zero-dependency and has wittren in TypeScript.

Quick examples

   <div id="app" class="flex justify-center space-x-1">
      <div class=" border-2 border-primary relative h-512 w-512"  >
        <img src="man-8293794_1280.webp" class="bg-gray-800 w-full h-full opacity-70" alt="" srcset="">
        <div id="cropElt" class=" border-primary absolute top-5 h-256 w-256  border-2" draggable="true">
            <canvas  class="rounded-full border-primary border-2" ></canvas>
            <!-- <div class="dot rotate" id="rotate"></div>
            <div class="rotate-link bg-[#1E88E5] hover:bg-[#0D47A1]"></div> -->
            <div class=" resizer top-left" ></div>
            <div class=" resizer bottom-left" ></div>
            <div class=" resizer  mid-top" ></div>
            <div class=" resizer mid-bottom" ></div>
            <div class=" resizer mid-left" ></div>
            <div class=" resizer mid-right" ></div>
            <div class=" resizer bottom-right" ></div>
            <div class=" resizer top-right" ></div>

            <div class=" w-full border-2 border-primary absolute border-dotted top-50"></div>
            <div class=" h-full border-2 border-primary absolute border-dotted top-0 left"></div>
        </div>
      </div>
      <div class="w-512 h-512 border-2 border-primary">
        <img src="man-8293794_1280.webp" srcset="" id="imgCropped" class="w-full h-full"/>
      </div>
    </div>

  import { CropImage } from '@trandx/crop-image';
    
      const cropElt = document.querySelector('#cropElt')
      const imageSrc = "man-8293794_1280.webp"
      const imgCropped = document.querySelector("#imgCropped")
      const corner_class = {
        top_left: "top-left",
        mid_top: "mid-top",
        top_right: "top-right",
        mid_left: "mid-left",
        mid_right: "mid-right",
        bottom_left: "bottom-left",
        mid_bottom: "mid-bottom",
        bottom_right: "bottom-right",
      }

      const cropImage = new CropImage()
   
      cropImage.run({crop_elt: cropElt, img_src: imageSrc, corner_class})?.oncrop((e)=>{
        /**
          * to get data, you can use the const cropImage or event e 
          * 
          * eg 1 :
          * 
          * // const crop = e.currentTarget as CropImage
          * // console.log(crop.getImageCropped());
          * 
          * eg 2:
          * 
          * //cropImage.download();
          * //imageCropped.value.src = cropImage.getImageCropped()
          * 
          */
        const crop = e.currentTarget
        const data = crop.getImageCropped("webp")
        imgCropped.srcset = data
        console.log(data);
      })
    

CHECK CSS CODE IN THE PACKAGE

Running online code link

For running code you can check here

NOTE: The default attribut Class that you see in this prevevious JS example can be updated but, it must be declared in the HTML Code for a well running

Running

Install via package manager

npm i @trandx/crop-image or pnpm i @trandx/crop-image

To run benchmark on your PC follow steps from below

1. git clone https://github.com/Trandx/crop-image.git
2. cd into the directory
3. pnpm install
4. pnpm dev

In case you notice any irregularities in benchmark or you want to add sort library to benchmark score please open issue here

Author