멈춰!!
- 비트맵 이미지를 벡터로 꼭 바꿔야하는 사람들을 위한 코드
- 일반적으로는 브라우저에서 이 짓을 수행해야할 이유는 없다!!
- 아니 일반적으로는 이런 일을 할 이유가 없다.
사진
- 실사 이미지는 결과가 별로다. 정확도를 위해서는 어도비 일러스트레이터에서 작업하자.
코드
import React, { ChangeEvent, useState } from 'react';
import { bitmap2vector } from 'bitmap2vector';
function App() {
const [svgImage, setSvgImage] = useState('');
const [imageSrc, setImageSrc] = useState('');
const encodeFileToUint8Array = async (fileBlob : File) => {
const buffer = await fileBlob.arrayBuffer();
const bytes = new Uint8Array(buffer);
return bytes;
};
const encodeFileToBase64 = (fileBlob : File) => {
const reader = new FileReader();
reader.readAsDataURL(fileBlob);
return new Promise((resolve) => {
reader.onload = () => {
setImageSrc(reader.result!.toString());
resolve(null);
};
});
};
const handleImageInput = async (e : ChangeEvent<HTMLInputElement>) => {
const {files} = e.target;
if(files == null){
return;
}
const bytes = await encodeFileToUint8Array(files[0]);
encodeFileToBase64(files[0]);
const result = await bitmap2vector({
input: bytes,
});
setSvgImage(result.content)
}
return (
<>
<input type="file" accept='image/*' onInput={handleImageInput}/>
<img src={imageSrc} />
<img src={`data:image/svg+xml;utf8,${svgImage}`} />
</>
);
}
export default App;