canvas를 데이터 베이스에 넣는 방법

canvas= document.querySelector('canvas').toDataURL('image/png');

 

그림 파일이나 캔버스를 이런식으로 선택해서 이렇게 하면 엄청 긴 주소로 파일을 가져오고 디비에 집어 넣을 수 있다.

 

장점 

1. 사진을 데이터로 변환하여 데이터 베이스에 집어 넣을 수 있다.

2.정확한 데이터를 입력할 때 좋다.

(서명 같은거 받을때 혹은 화면에 무언가를 써서 바로 집어 넣어야 할때 좋다.)

 

2.단점

1. 느리다. 

 이거 데이터 베이스에 정장된거 보면 엄청 긴 문자열이 들어간다. 긴 문자열을 빼와야 하니 느릴 수 밖에...

데이터 베이스에 보통 이런 길이로 들어간다.

 

#> base64 vais.png
iVBORw0KGgoAAAANSUhEUgAAANgAAACtCAYAAADSz7GfAAAAAXNSR0ICQMB9xQAAAARnQU1BAACx
jwv8YQUAAAAJcEhZcwAAEnQAABJ0Ad5mH3gAAAAZdEVYdFNvZnR3YXJlAE1pY3Jvc29mdCBPZmZp
Y2V/7TVxAAAWJklEQVR4Xu2df3AV13XHL6SWCWAHnASLmGDLTkAUOkXQ8mOGjCH5w6JtYlMnNZpp
YxG32O4kRbSTsXAby7TTIJo0iDQDeDwZY7dT7IwbbNczxn80mJIZIBkjy05GxgkWru0Kk8TgFPM7
qPvdd5+07767u3f37d23u+/7mVl09+np6emx3z3nnnPuueNGHAQhxArj5VdCiAUoMEIsQoERYhEK
jBCLUGCEWIQCI8QiFBghFqHACLEIBUaIRSgwQixCgRFiEQqMEItQYIRYhAIjxCIUGCEWocAIsQgF
RohFKDBCLEKBEWIRCowQi1BghFiEAiPEIhQYIRahwEgkXn31VfHCCy+I48ePy0dIEBQYCeXcuXNi
586dYs6cOe6xYsUKMX36dNHX1yefQfxgZ1+i5aWXXhKnTp0SBw8eFFu3bvW1WP39/WL+/PnyjKjQ
gpFRYKVaWlrEuHHjRFtbm2upNmzYEOgOwl0k/uRaYJgP4ALo6Ohw77gkPvgc16xZI44dOyYfMQPu
IwkALmLeOHDgwMiSJUvg2lYcPT098hkkCsPDwyMTJkyo+jzDjubm5pGzZ8/KVyE6cmXBcLfEnXbp
0qXu3EDl6aefliMSBbh5cSzRli1bhCNMeUZ05EZgTz31lBvB6u3tlY9UAzeRLkt0orqFoL29Xaxe
vVqeET8yLzDcXTHZXrVqldGFwLlYdKLelGC1tm/fLs9IEJkVGMS0cuVKV1xRIlU615Eky3333Sdu
[....]

위의 문장보다 더 길게 들어간다. 한번은 캔버스로 선 하나 그은거 저장해봤는데 크롬 콘솔창에 10줄 이상 들어간걸로 봤다.

 

2.용량이 커진다.

 대략 30%정도 더 커진다고한다.

 

3.지원하는 브라우저가 있고 지원하지 않는 브라우저가 있다고 한다.

 

 

 

분명 필요할 순간이 있을 것이다. 막 사용하기 보다 상황에 맞게 잘 사용하면 분명 엄청난 도움이 될 것이라고 생각된다.