[HTML/CSS]HTML에서 이미지 편집하기(imageKit API)

 

 

안녕하세요 무택입니다 :)

오늘은 CSS를 사용하지 않고 HTML에서 이미지 태그에 대해 편집하는 방법에 대해 써보려고 합니다. 많이 사용하진 않지만 혹시 모르니까 자투리 상식 개념으로 알고 있으면 좋을 것 같아요👍

 

 

imageKit API 사용

이 기능을 이용하기 위해서는 imageKit API를 이용해야 합니다. 이게 가장 큰 단점이라고 생각합니다ㅜ

 

Image & Video CDN | Dynamic Optimizations, Transformations & DAM | ImageKit.io

2023-09-18 기준으로 20GB까지 이용료가 무료입니다.

 

 

구현 방식

1. API 사이트 가입

2. 사용할 이미지 업로드 및 이미지 링크 확인

3. 이미지 링크 활용해 HTML 작성

4. HTML내 `img`태그에서 이미지 편집 코드 추가

 

이렇게 기본적으로 기능을 사용하려면 API사이트에 이미지를 업로드해서 CDN방식으로 이미지를 불러와야 합니다. 그래서 활용성이 안 나오지만 혹시 모를 경우를 위해 이런 API가 있다는 정도만 알고 넘어가면 좋을 것 같습니다.

 

 

codepen

See the Pen [HTML/CSS]HTML에서 img태그 조정하기(imageKit API) by TytanLee (@TytanLee) on CodePen.

 

 

코드 설명

<img src="https://ik.imagekit.io/1chgunkrz/example-deer?tr=편집 코드">

기본적으로 이미지링크 뒤에 `?tr=편집 코드` 이런 형식을 이루고 있습니다.

 

 

1. 가로 세로 조절 `tr=w-200,h-100`

<img src="https://ik.imagekit.io/1chgunkrz/example-deer?tr=w-200,h-100">
<!--  w-0.2는 20%  -->

 

 

2. 퀄리티 조절 `tr=q-10`

<img src="https://ik.imagekit.io/1chgunkrz/example-deer?tr=q-10">
<!--  0~100으로 퍼센트 조절  -->

 

3. 흐림 조절 `tr=bl-50`

<img src="https://ik.imagekit.io/1chgunkrz/example-deer?tr=bl-50">
<!--  0~100으로 퍼센트 조절  -->

 

4. 그레이스케일 조절 `tr=e-grayscale`

<img src="https://ik.imagekit.io/1chgunkrz/example-deer?tr=e-grayscale">

 

 

5. 라운드 조절 `tr=r-200`

<img src="https://ik.imagekit.io/1chgunkrz/example-deer?tr=r-200">
<!--  픽셀값으로 조정 + max로 원형 가능  -->

 

코드 정리

 

imageKit 문서 원본 링크