์ด๋ด,
์ด๊ธฐํํ ๋ ์๋ช
ํจ๋(์บ๋ฒ์ค)๋ฅผ ํน์ ์์์ผ๋ก ์ค์ ํ์ง๋ง ํฌ๋ช
ํ๊ฑฐ๋ ํฐ์ ๋ฐฐ๊ฒฝ์ ์ ์ฅํ๊ณ ์ถ์ต๋๋ค. ์ด๋ฏธ ์ฐ๊ฒฐ๋ ํ๋กํ ํ์
removeBlanks ํจ์๋ฅผ ์ฌ์ฉํ์ฌ ์๋ช
๋ง ์บก์ฒํ์ง๋ง bg๋ ์ฌ์ ํ rgb(255,243,204) ๋ค์์ ํตํด ๋ณ๊ฒฝํ๋ ค๊ณ ํฉ๋๋ค.
์๋ช
ํจ๋.๋ฐฐ๊ฒฝ์ = rgb(255, 255, 255); ๊ทธ๋ฌ๋ ์คํธ๋กํฌ์ ์๋ช
ํ๋ฉด base64 ์ด๋ฏธ์ง๊ฐ ์ด๋ฏธ ๋ฑ๋ก๋ ๊ฒ ๊ฐ์ต๋๋ค.
์ด๋ค ์์ด๋์ด?
์๋ฒ๋ก ๋ณด๋ด๊ธฐ ์ ์ ๋จ์ํ ์์์ ๋ฐ๊พธ๋ ๊ฒ์ด ํจ๊ณผ๊ฐ ์์๊น์? CanvasContext2D#getImageData()
๋ฅผ ์ฌ์ฉํ์ฌ ์์ ์ด๋ฏธ์ง ๋ฐ์ดํฐ๋ฅผ ์ป์ ์ ์๊ณ ๋ชจ๋ ํฝ์
์ ๋ฐ๋ณตํ๊ณ ๋ณด์ด๋ ๋ฐฐ๊ฒฝ์(8๋นํธ ์ ์)์ ์ํ๋ ๊ฒ์ผ๋ก ๋ฐ๊ฟ ์ ์์ต๋๋ค. ์์ ๋ ์ด๋ฏธ์ง ๋ฐ์ดํฐ๋ฅผ ์คํ์คํฌ๋ฆฐ ์บ๋ฒ์ค์ ์ ์ฅํ๊ณ Canvas#toDataURL()
๋ฅผ ์ฌ์ฉํ์ฌ ๋ค์ ์ฝ์ต๋๋ค. ์๋ํ ์ ์์ต๋๋ค :)
์ฉ. ๋ฐฐ๊ฒฝ์์ ์บ๋ฒ์ค๊ฐ ์ง์์ง๋ฉด ์ ์ฉ๋๋ฏ๋ก ์ด๊ธฐํํ๊ฑฐ๋ SignaturePad#clear()
๋ช
์์ ์ผ๋ก ํธ์ถํ ๋๋ง ์ ์ฉ๋ฉ๋๋ค.
@szimek ๋ต๋ณ ๊ฐ์ฌํฉ๋๋ค. ๋๋ ์ด๊ฒ์ ์ํด removeBlanks ๊ธฐ๋ฅ์ ๋ค์ ์ฌ์ฉํ๋ ค๊ณ ํ์ต๋๋ค. ๋๋ ๊ทธ๊ฒ์ด ๋ฐฐ๊ฒฝ ํฝ์ ์ธ์ง ์๋ช ํฝ์ ์ธ์ง ๊ตฌ๋ณํ๋ ๋ฐฉ๋ฒ์ ์์๋ด์ผ๋ง ํฉ๋๋ค.
๋ํ ์๋ช
์ json ๋ฐฐ์ด ํํ์ ์ป๋ ๋ฐฉ๋ฒ์ด ์์ต๋๋ค
์ฆ {lx : 20, ly : 34, mx : 20, my : 34}
๋ถํํ๋ ํ์ฌ๋ ์๋๋๋ค. ๋ง์ง๋ง 4๊ฐ ํฌ์ธํธ๋ง ๋ฉ๋ชจ๋ฆฌ์ ์ ์ฅ๋๋ฏ๋ก ๋ชจ๋ ํฌ์ธํธ์ ์ก์ธ์คํ ์ ์๋ ๋ฐฉ๋ฒ์ด ์์ต๋๋ค. ํฅํ ๋ณ๊ฒฝ๋ ์ ์์ง๋ง ์ฐ์ ์์๊ฐ ๋ ๋์ ๋ช ๊ฐ์ง ๋ค๋ฅธ ๋ฌธ์ (์ฃผ๋ก ๋ง๋ง/๋น๋ง๋ง ํ๋ฉด๊ณผ ๊ด๋ จ๋จ)๊ฐ ์์ต๋๋ค.
๊ทธ๋ฌ๋ ์ด ๋ฐ์ดํฐ๊ฐ ์ ๋ง๋ก ํ์ํ ๊ฒฝ์ฐ ๋ชจ๋ ํฌ์ธํธ๋ฅผ ์ ์ฅํ๋๋ก ๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ฅผ ์์ฃผ ์ฝ๊ฒ ๋ณ๊ฒฝํ ์ ์์ต๋๋ค.
@khawye ์ง๋ฌธ์ด ๋ ์์ผ์๋ฉด ์ด ํธ๋ฅผ ๋ค์ ์ด์ด์ฃผ์ธ์.
๊ฐ์ฅ ์ ์ฉํ ๋๊ธ
์๋ฒ๋ก ๋ณด๋ด๊ธฐ ์ ์ ๋จ์ํ ์์์ ๋ฐ๊พธ๋ ๊ฒ์ด ํจ๊ณผ๊ฐ ์์๊น์?
CanvasContext2D#getImageData()
๋ฅผ ์ฌ์ฉํ์ฌ ์์ ์ด๋ฏธ์ง ๋ฐ์ดํฐ๋ฅผ ์ป์ ์ ์๊ณ ๋ชจ๋ ํฝ์ ์ ๋ฐ๋ณตํ๊ณ ๋ณด์ด๋ ๋ฐฐ๊ฒฝ์(8๋นํธ ์ ์)์ ์ํ๋ ๊ฒ์ผ๋ก ๋ฐ๊ฟ ์ ์์ต๋๋ค. ์์ ๋ ์ด๋ฏธ์ง ๋ฐ์ดํฐ๋ฅผ ์คํ์คํฌ๋ฆฐ ์บ๋ฒ์ค์ ์ ์ฅํ๊ณCanvas#toDataURL()
๋ฅผ ์ฌ์ฉํ์ฌ ๋ค์ ์ฝ์ต๋๋ค. ์๋ํ ์ ์์ต๋๋ค :)์ฉ. ๋ฐฐ๊ฒฝ์์ ์บ๋ฒ์ค๊ฐ ์ง์์ง๋ฉด ์ ์ฉ๋๋ฏ๋ก ์ด๊ธฐํํ๊ฑฐ๋
SignaturePad#clear()
๋ช ์์ ์ผ๋ก ํธ์ถํ ๋๋ง ์ ์ฉ๋ฉ๋๋ค.