https://github.com/tanaikech/cropimagebyborder_js

This is a Javascript library for cropping images by the border.
https://github.com/tanaikech/cropimagebyborder_js

image-processing javascript javascript-library library

Last synced: 3 months ago
JSON representation

This is a Javascript library for cropping images by the border.

• Host: GitHub
• URL: https://github.com/tanaikech/cropimagebyborder_js
• Owner: tanaikech
• License: mit
• Created: 2022-08-09T07:40:01.000Z (over 2 years ago)
• Default Branch: master
• Last Pushed: 2022-08-10T00:57:35.000Z (over 2 years ago)
• Last Synced: 2023-08-25T10:57:59.285Z (over 1 year ago)
• Topics: image-processing, javascript, javascript-library, library
• Language: JavaScript
• Homepage:
• Size: 7.81 KB
• Stars: 4
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Javascript Library for Cropping Image by Border



[![MIT License](http://img.shields.io/badge/license-MIT-blue.svg?style=flat)](LICENCE)



# Overview

This is a Javascript library for cropping images by the border.



# Description

When an image is used, there is a case where I wanted to simply crop the image by a script. In this Javascript library, the image is cropped by a border. The sample situation is as follows.

![](https://tanaikech.github.io/image-storage/20220809a/fig1.png)

In this sample situation, a red rectangle is enclosed by a border (1 pixel) with "#000000". By this border, this library crops the red rectangle. In this case, the 1-pixel border is not included in the resulting image.



# Install

```html

```

Or, using jsdelivr cdn

```html

```

# Usage

This library is used for cropping the image by the border. The simple sample script is as follows.

```html

  

  function main(e) {

    const filename = "sample.png";

    const file = e.files[0];

    const fr = new FileReader();

    fr.readAsDataURL(file);

    fr.onload = async (f) => {

      const obj = { borderColor: "#000000", base64Data: f.target.result };

      const base64 = await CropImageByBorder.getInnerImage(obj).catch((err) =>

        console.log(err)

      );

      const link = document.createElement("a");

      link.download = filename;

      link.href = base64;

      document.body.appendChild(link);

      link.click();

      document.body.removeChild(link);

      delete link;

    };

  }

```

When this HTML is opened, you can see the file input tag. When you put a sample PNG file including a border of "#000000", the cropped image is returned.

## Options

In the current version, the method of `getInnerImage` has 1 argument like `CropImageByBorder.getInnerImage(obj)`. The cropping is done using **Canvas API**. [Ref](https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API)

- `obj` : This is an object including the border color and data.

  - `borderColor`: Border color. This library crops the image using this border. Please set the color as the HEX like `#000000`.

  - `base64Data`: In this case, the data is required to be base64 data including the header like `data:image/png;base64,` for PNG.

  - `offset`: If the result image shows the border, please adjust this value. The default value is `2` pixel.

- Returned value: Promise is returned. And, in this library, the output image is returned as base64 data including the header of `data:image/png;base64,`. The default output mimeType is `image/png`.

---



# Licence

[MIT](LICENCE)



# Author

[Tanaike](https://tanaikech.github.io/about/)

If you have any questions and commissions for me, feel free to tell me.



# Update History

- v1.0.0 (August 9, 2022)

  1. Initial release.

- v1.0.1 (August 10, 2022)

  1. `offset` is added.

[TOP](#top)