https://github.com/tenpamk2/canvas-rectangle-to-square-image

Generate square image from rectangle image. It's useful for posting instagram!!
https://github.com/tenpamk2/canvas-rectangle-to-square-image

blur canvas instagram webgl

Last synced: 28 days ago
JSON representation

Generate square image from rectangle image. It's useful for posting instagram!!

• Host: GitHub
• URL: https://github.com/tenpamk2/canvas-rectangle-to-square-image
• Owner: tenpaMk2
• License: mit
• Created: 2022-08-24T14:02:19.000Z (over 2 years ago)
• Default Branch: main
• Last Pushed: 2022-08-26T09:17:44.000Z (over 2 years ago)
• Last Synced: 2024-11-11T06:23:57.766Z (3 months ago)
• Topics: blur, canvas, instagram, webgl
• Language: JavaScript
• Homepage:
• Size: 4.63 MB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# canvas-rectangle-to-square-image

Generate square image from rectangle image by canvas(webgl).

It's useful for posting to instagram!!

Techs:

- [Vite](https://vitejs.dev/)

- [React](https://reactjs.org/)

- [Tailwind CSS](https://tailwindcss.com/)

## processing step

### step0: input image

![input](./img/input.jpg)

### step1: make square image

![square](./img/square.png)

### step2: blur image

![blurred](./img/blurred.png)

### step3: composite blurred image and original image

![output](./img/output.png)

## Credits

| item (description) | author       | URL                                |

| :----------------: | :----------- | :--------------------------------- |

|      glfx.js       | Evan Wallace |  |