Signature_pad: ์ฆ‰์„์—์„œ backgroundColor ๋ณ€๊ฒฝ

์— ๋งŒ๋“  2015๋…„ 11์›” 19์ผ  ยท  4์ฝ”๋ฉ˜ํŠธ  ยท  ์ถœ์ฒ˜: szimek/signature_pad

์ด๋ด,

์ดˆ๊ธฐํ™”ํ•  ๋•Œ ์„œ๋ช… ํŒจ๋“œ(์บ”๋ฒ„์Šค)๋ฅผ ํŠน์ • ์ƒ‰์ƒ์œผ๋กœ ์„ค์ •ํ–ˆ์ง€๋งŒ ํˆฌ๋ช…ํ•˜๊ฑฐ๋‚˜ ํฐ์ƒ‰ ๋ฐฐ๊ฒฝ์— ์ €์žฅํ•˜๊ณ  ์‹ถ์Šต๋‹ˆ๋‹ค. ์ด๋ฏธ ์—ฐ๊ฒฐ๋œ ํ”„๋กœํ† ํƒ€์ž… removeBlanks ํ•จ์ˆ˜๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ์„œ๋ช…๋งŒ ์บก์ฒ˜ํ–ˆ์ง€๋งŒ bg๋Š” ์—ฌ์ „ํžˆ rgb(255,243,204) ๋‹ค์Œ์„ ํ†ตํ•ด ๋ณ€๊ฒฝํ•˜๋ ค๊ณ  ํ•ฉ๋‹ˆ๋‹ค.
์„œ๋ช… ํŒจ๋“œ.๋ฐฐ๊ฒฝ์ƒ‰ = rgb(255, 255, 255); ๊ทธ๋Ÿฌ๋‚˜ ์ŠคํŠธ๋กœํฌ์— ์„œ๋ช…ํ•˜๋ฉด base64 ์ด๋ฏธ์ง€๊ฐ€ ์ด๋ฏธ ๋“ฑ๋ก๋œ ๊ฒƒ ๊ฐ™์Šต๋‹ˆ๋‹ค.

์–ด๋–ค ์•„์ด๋””์–ด?

๊ฐ€์žฅ ์œ ์šฉํ•œ ๋Œ“๊ธ€

์„œ๋ฒ„๋กœ ๋ณด๋‚ด๊ธฐ ์ „์— ๋‹จ์ˆœํžˆ ์ƒ‰์ƒ์„ ๋ฐ”๊พธ๋Š” ๊ฒƒ์ด ํšจ๊ณผ๊ฐ€ ์žˆ์„๊นŒ์š”? CanvasContext2D#getImageData() ๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ์›์‹œ ์ด๋ฏธ์ง€ ๋ฐ์ดํ„ฐ๋ฅผ ์–ป์„ ์ˆ˜ ์žˆ๊ณ  ๋ชจ๋“  ํ”ฝ์…€์„ ๋ฐ˜๋ณตํ•˜๊ณ  ๋ณด์ด๋Š” ๋ฐฐ๊ฒฝ์ƒ‰(8๋น„ํŠธ ์ •์ˆ˜)์„ ์›ํ•˜๋Š” ๊ฒƒ์œผ๋กœ ๋ฐ”๊ฟ€ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ์ˆ˜์ •๋œ ์ด๋ฏธ์ง€ ๋ฐ์ดํ„ฐ๋ฅผ ์˜คํ”„์Šคํฌ๋ฆฐ ์บ”๋ฒ„์Šค์— ์ €์žฅํ•˜๊ณ  Canvas#toDataURL() ๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ๋‹ค์‹œ ์ฝ์Šต๋‹ˆ๋‹ค. ์ž‘๋™ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค :)

์ฉ. ๋ฐฐ๊ฒฝ์ƒ‰์€ ์บ”๋ฒ„์Šค๊ฐ€ ์ง€์›Œ์ง€๋ฉด ์ ์šฉ๋˜๋ฏ€๋กœ ์ดˆ๊ธฐํ™”ํ•˜๊ฑฐ๋‚˜ SignaturePad#clear() ๋ช…์‹œ์ ์œผ๋กœ ํ˜ธ์ถœํ•  ๋•Œ๋งŒ ์ ์šฉ๋ฉ๋‹ˆ๋‹ค.

๋ชจ๋“  4 ๋Œ“๊ธ€

์„œ๋ฒ„๋กœ ๋ณด๋‚ด๊ธฐ ์ „์— ๋‹จ์ˆœํžˆ ์ƒ‰์ƒ์„ ๋ฐ”๊พธ๋Š” ๊ฒƒ์ด ํšจ๊ณผ๊ฐ€ ์žˆ์„๊นŒ์š”? CanvasContext2D#getImageData() ๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ์›์‹œ ์ด๋ฏธ์ง€ ๋ฐ์ดํ„ฐ๋ฅผ ์–ป์„ ์ˆ˜ ์žˆ๊ณ  ๋ชจ๋“  ํ”ฝ์…€์„ ๋ฐ˜๋ณตํ•˜๊ณ  ๋ณด์ด๋Š” ๋ฐฐ๊ฒฝ์ƒ‰(8๋น„ํŠธ ์ •์ˆ˜)์„ ์›ํ•˜๋Š” ๊ฒƒ์œผ๋กœ ๋ฐ”๊ฟ€ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ์ˆ˜์ •๋œ ์ด๋ฏธ์ง€ ๋ฐ์ดํ„ฐ๋ฅผ ์˜คํ”„์Šคํฌ๋ฆฐ ์บ”๋ฒ„์Šค์— ์ €์žฅํ•˜๊ณ  Canvas#toDataURL() ๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ๋‹ค์‹œ ์ฝ์Šต๋‹ˆ๋‹ค. ์ž‘๋™ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค :)

์ฉ. ๋ฐฐ๊ฒฝ์ƒ‰์€ ์บ”๋ฒ„์Šค๊ฐ€ ์ง€์›Œ์ง€๋ฉด ์ ์šฉ๋˜๋ฏ€๋กœ ์ดˆ๊ธฐํ™”ํ•˜๊ฑฐ๋‚˜ SignaturePad#clear() ๋ช…์‹œ์ ์œผ๋กœ ํ˜ธ์ถœํ•  ๋•Œ๋งŒ ์ ์šฉ๋ฉ๋‹ˆ๋‹ค.

@szimek ๋‹ต๋ณ€ ๊ฐ์‚ฌํ•ฉ๋‹ˆ๋‹ค. ๋‚˜๋Š” ์ด๊ฒƒ์„ ์œ„ํ•ด removeBlanks ๊ธฐ๋Šฅ์„ ๋‹ค์‹œ ์‚ฌ์šฉํ•˜๋ ค๊ณ ํ–ˆ์Šต๋‹ˆ๋‹ค. ๋‚˜๋Š” ๊ทธ๊ฒƒ์ด ๋ฐฐ๊ฒฝ ํ”ฝ์…€์ธ์ง€ ์„œ๋ช… ํ”ฝ์…€์ธ์ง€ ๊ตฌ๋ณ„ํ•˜๋Š” ๋ฐฉ๋ฒ•์„ ์•Œ์•„๋‚ด์•ผ๋งŒ ํ•ฉ๋‹ˆ๋‹ค.

๋˜ํ•œ ์„œ๋ช…์˜ json ๋ฐฐ์—ด ํ‘œํ˜„์„ ์–ป๋Š” ๋ฐฉ๋ฒ•์ด ์žˆ์Šต๋‹ˆ๋‹ค
์ฆ‰ {lx : 20, ly : 34, mx : 20, my : 34}

๋ถˆํ–‰ํžˆ๋„ ํ˜„์žฌ๋Š” ์•„๋‹™๋‹ˆ๋‹ค. ๋งˆ์ง€๋ง‰ 4๊ฐœ ํฌ์ธํŠธ๋งŒ ๋ฉ”๋ชจ๋ฆฌ์— ์ €์žฅ๋˜๋ฏ€๋กœ ๋ชจ๋“  ํฌ์ธํŠธ์— ์•ก์„ธ์Šคํ•  ์ˆ˜ ์žˆ๋Š” ๋ฐฉ๋ฒ•์ด ์—†์Šต๋‹ˆ๋‹ค. ํ–ฅํ›„ ๋ณ€๊ฒฝ๋  ์ˆ˜ ์žˆ์ง€๋งŒ ์šฐ์„  ์ˆœ์œ„๊ฐ€ ๋” ๋†’์€ ๋ช‡ ๊ฐ€์ง€ ๋‹ค๋ฅธ ๋ฌธ์ œ(์ฃผ๋กœ ๋ง๋ง‰/๋น„๋ง๋ง‰ ํ™”๋ฉด๊ณผ ๊ด€๋ จ๋จ)๊ฐ€ ์žˆ์Šต๋‹ˆ๋‹ค.

๊ทธ๋Ÿฌ๋‚˜ ์ด ๋ฐ์ดํ„ฐ๊ฐ€ ์ •๋ง๋กœ ํ•„์š”ํ•œ ๊ฒฝ์šฐ ๋ชจ๋“  ํฌ์ธํŠธ๋ฅผ ์ €์žฅํ•˜๋„๋ก ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋ฅผ ์•„์ฃผ ์‰ฝ๊ฒŒ ๋ณ€๊ฒฝํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

@khawye ์งˆ๋ฌธ์ด ๋” ์žˆ์œผ์‹œ๋ฉด ์ด ํ˜ธ๋ฅผ ๋‹ค์‹œ ์—ด์–ด์ฃผ์„ธ์š”.

์ด ํŽ˜์ด์ง€๊ฐ€ ๋„์›€์ด ๋˜์—ˆ๋‚˜์š”?
0 / 5 - 0 ๋“ฑ๊ธ‰