Node-vibrant: 'CanvasRenderingContext2D'์—์„œ 'getImageData' ์‹คํ–‰ ์‹คํŒจ: ์บ”๋ฒ„์Šค๊ฐ€ ์›๋ณธ ๊ฐ„ ๋ฐ์ดํ„ฐ์— ์˜ํ•ด ์˜ค์—ผ๋˜์—ˆ์Šต๋‹ˆ๋‹ค.

์— ๋งŒ๋“  2019๋…„ 03์›” 17์ผ  ยท  5์ฝ”๋ฉ˜ํŠธ  ยท  ์ถœ์ฒ˜: Vibrant-Colors/node-vibrant

๋ฒ„์ „ 3.1.0 ์ด์ƒ.
๋ฒ„์ „ 3.0.0์—์„œ๋Š” ๋ฐœ์ƒํ•˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค.
์Šคํƒ ์ถ”์ :
SecurityError: 'CanvasRenderingContext2D'์—์„œ 'getImageData' ์‹คํ–‰ ์‹คํŒจ: ์บ”๋ฒ„์Šค๊ฐ€ ์›๋ณธ ๊ฐ„ ๋ฐ์ดํ„ฐ์— ์˜ํ•ด ์˜ค์—ผ๋˜์—ˆ์Šต๋‹ˆ๋‹ค.
์˜ค๋ฅ˜: 'CanvasRenderingContext2D'์—์„œ 'getImageData' ์‹คํ–‰ ์‹คํŒจ: ์บ”๋ฒ„์Šค๊ฐ€ ์›๋ณธ ๊ฐ„ ๋ฐ์ดํ„ฐ์— ์˜ํ•ด ์˜ค์—ผ๋˜์—ˆ์Šต๋‹ˆ๋‹ค.
BrowserImage.getImageData์—์„œ (browser.js?cf4e:105)
BrowserImage.ImageBase.applyFilter์—์„œ (base.js?de7c:22)
Vibrant._process์—์„œ (vibrant.js?b6c6:22)
...

bug investigation

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

์•ˆ๋…•ํ•˜์„ธ์š” ์—ฌ๋Ÿฌ๋ถ„ - 1, 3์ดˆ ๋™์•ˆ ๋ผ๋””์˜ค ์นจ๋ฌต์— ๋Œ€ํ•ด ์ฃ„์†กํ•ฉ๋‹ˆ๋‹ค. ์ตœ๊ทผ์— ๋‚˜ ์ž์‹ ์„ ์œ„ํ•ด ๋งŽ์€ ์ผ์„ ํ•˜๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค. ์ด ๋ฌธ์ œ์— ๋Œ€ํ•ด ์ž‘์—…ํ•  ์ˆ˜ ์žˆ๋Š” ๋ฐ ์•ฝ 2์ฃผ๊ฐ€ ์†Œ์š”๋˜๊ณ (๊ทธ๋ฆฌ๊ณ  ๋‹ค๋ฅธ ์ผ๋ถ€ ๋ฒ„๊ทธ๋ฅผ ํฌ๊ฒŒ ์ˆ˜์ •ํ•จ) crossOrigin ๊ด€๋ จ๋œ ๋ช‡ ๊ฐ€์ง€ ํ•ญ๋ชฉ์„ ์‚ดํŽด๋ณด๊ฒ ์Šต๋‹ˆ๋‹ค. ๋‹ค๋ฅธ ์‚ฌ๋žŒ์ด ์กฐ์‚ฌํ•˜๊ณ  ์žˆ๋Š” ๊ฒฝ์šฐ ๋„์›€์ด ๋˜๋„๋ก ๋…ธ๋ ฅํ•˜๊ฒ ์Šต๋‹ˆ๋‹ค(PR์„ ์‚ฌ๋ž‘ํ•˜๊ณ  ์กฐ์‚ฌํ•˜๋Š” ๋ฐ ๋„์›€์ด ๋ฉ๋‹ˆ๋‹ค! โ™ฅ)

๋ฌธ์ œ์˜ ์ฝ”๋“œ๋Š” #61๋กœ ์ถ”๊ฐ€๋˜์—ˆ์œผ๋ฉฐ ๊ฒฐ๊ตญ ์ปค๋ฐ‹ ed21a58fda54774590da729d1a47e2b0b6f5a3a8์—์„œ #81๋กœ ์ด๋™๋˜์—ˆ์Šต๋‹ˆ๋‹ค. ๋ฐ์ดํ„ฐ๊ฐ€ ์ œ๋Œ€๋กœ ํ’€๋ง๋˜๊ณ  ์žˆ๊ณ  crossOrigin์ด ์ˆ˜๋ช… ์ฃผ๊ธฐ ๋“ฑ์—์„œ ์ ์ ˆํ•˜๊ฒŒ ์„ค์ •๋˜์–ด ์žˆ๋Š”์ง€ ํ™•์ธํ•˜๊ธฐ ์œ„ํ•ด ์ด ๋ณ‘ํ•ฉ์„ ์กฐ๊ธˆ ๋” ์กฐ์‚ฌํ•ด์•ผ ํ•ฉ๋‹ˆ๋‹ค.

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

๋‚˜๋Š” ๊ฐ™์€ ๋ฌธ์ œ์— ์ง๋ฉด ํ•ด์žˆ๋‹ค

์ €๋„ ์˜ค๋Š˜ ์ด ์˜ค๋ฅ˜๊ฐ€ ๋ฐœ์ƒํ–ˆ์Šต๋‹ˆ๋‹ค. ์•„๋ฌด๊ฒƒ๋„ ์—…๋ฐ์ดํŠธํ•˜์ง€ ์•Š์•˜๊ธฐ ๋•Œ๋ฌธ์— ๋ฌด์—‡์ด ์‹œ์ž‘๋˜์—ˆ๋Š”์ง€ ํ™•์‹คํ•˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค.
stackoverflow์— ๋Œ€ํ•œ ๋‹ต๋ณ€์„ ์ฐพ์•˜์ง€๋งŒ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ์— ๋Œ€ํ•œ ๋‚ด๋ถ€ ๋ณ€๊ฒฝ์ด ํ•„์š”ํ•  ๊ฒƒ์ด๋ผ๊ณ  ์ƒ๊ฐํ•ฉ๋‹ˆ๋‹ค. ์ค‘๊ฐ„์— ์–ด๋–ป๊ฒŒ ๊ณ ์ณ์•ผ ํ• ์ง€ ์ž˜ ๋ชจ๋ฅด๊ฒ ์Šต๋‹ˆ๋‹ค.

@Shannor ์ด๋ฏธ ์ฝ”๋“œ ๋ฒ ์ด์Šค์— ์žˆ๋Š” ๊ฒƒ ๊ฐ™์Šต๋‹ˆ๋‹ค. ์ด ๋ฌธ์ œ๋ฅผ ํ•ด๊ฒฐํ•˜๋Š” ๋ฐฉ๋ฒ•๋„ ์ž˜ ๋ชจ๋ฅด๊ฒ ์Šต๋‹ˆ๋‹ค. ์ด ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ ์ž์ฒด๊ฐ€ ์•„๋‹ˆ๋ผ ์ด๋ฏธ์ง€๊ฐ€ ์ œ๊ณต๋˜๋Š” ์œ„์น˜์˜ ๋ฌธ์ œ์ธ์ง€ ๊ถ๊ธˆํ•ฉ๋‹ˆ๋‹ค. ์ž‘์—… ์ค‘์ธ ํ”„๋กœ์ ํŠธ์—์„œ ๊ฐ„ํ—์ ์œผ๋กœ ์ด ๋ฌธ์ œ๊ฐ€ ๋ฐœ์ƒํ•˜๊ธฐ ๋•Œ๋ฌธ์ž…๋‹ˆ๋‹ค. https://github.com/akfish/node-vibrant/blob/178f6afad09717e22613068a9229fe169b3c3228/src/image/browser.ts#L52

ํ˜„์žฌ ๋‚ด ์ด๋ฏธ์ง€๋Š” Google Cloud ๋ฒ„ํ‚ท์—์„œ ๊ฐ€์ ธ์˜ค๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค. ์ด ์‹œ์ ์—์„œ ๋ชจ๋“  ์‚ฌ๋žŒ์ด ํด๋ผ์šฐ๋“œ ํ˜ธ์ŠคํŒ… ์„œ๋น„์Šค(AWS, Azure ๋“ฑ)๋ฅผ ์–ด๋Š ์ •๋„ ์‚ฌ์šฉํ•˜๊ณ  ์žˆ๋‹ค๊ณ  ๊ฐ€์ •ํ•ฉ๋‹ˆ๋‹ค. node-vibrant๊ฐ€ ์ˆ˜ํ–‰ํ•˜๊ฑฐ๋‚˜ ์œ ์‚ฌํ•œ ์ž‘์—…์„ ์ˆ˜ํ–‰ํ•˜๋Š” ๋‹ค๋ฅธ ์ €์žฅ์†Œ์—์„œ ์ด ๋ฒ„๊ทธ๋ฅผ ๋ณด์•˜๊ธฐ ๋•Œ๋ฌธ์— ์˜ํ–ฅ์„ ๋ฏธ์น˜๋Š” ๋ธŒ๋ผ์šฐ์ € ๋ณ€๊ฒฝ์ผ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ๋‚˜๋Š” ๊ณ„์† ๊ฒฝ๊ณ„ํ•˜๊ณ  ๋‚ด๊ฐ€ ์ฐพ์€ ๋ชจ๋“  ๊ฒƒ์„ ์ƒˆ๋กœ์šด ์ •๋ณด์™€ ์—ฐ๊ฒฐํ•  ๊ฒƒ์ž…๋‹ˆ๋‹ค.

์•ˆ๋…•ํ•˜์„ธ์š” ์—ฌ๋Ÿฌ๋ถ„ - 1, 3์ดˆ ๋™์•ˆ ๋ผ๋””์˜ค ์นจ๋ฌต์— ๋Œ€ํ•ด ์ฃ„์†กํ•ฉ๋‹ˆ๋‹ค. ์ตœ๊ทผ์— ๋‚˜ ์ž์‹ ์„ ์œ„ํ•ด ๋งŽ์€ ์ผ์„ ํ•˜๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค. ์ด ๋ฌธ์ œ์— ๋Œ€ํ•ด ์ž‘์—…ํ•  ์ˆ˜ ์žˆ๋Š” ๋ฐ ์•ฝ 2์ฃผ๊ฐ€ ์†Œ์š”๋˜๊ณ (๊ทธ๋ฆฌ๊ณ  ๋‹ค๋ฅธ ์ผ๋ถ€ ๋ฒ„๊ทธ๋ฅผ ํฌ๊ฒŒ ์ˆ˜์ •ํ•จ) crossOrigin ๊ด€๋ จ๋œ ๋ช‡ ๊ฐ€์ง€ ํ•ญ๋ชฉ์„ ์‚ดํŽด๋ณด๊ฒ ์Šต๋‹ˆ๋‹ค. ๋‹ค๋ฅธ ์‚ฌ๋žŒ์ด ์กฐ์‚ฌํ•˜๊ณ  ์žˆ๋Š” ๊ฒฝ์šฐ ๋„์›€์ด ๋˜๋„๋ก ๋…ธ๋ ฅํ•˜๊ฒ ์Šต๋‹ˆ๋‹ค(PR์„ ์‚ฌ๋ž‘ํ•˜๊ณ  ์กฐ์‚ฌํ•˜๋Š” ๋ฐ ๋„์›€์ด ๋ฉ๋‹ˆ๋‹ค! โ™ฅ)

๋ฌธ์ œ์˜ ์ฝ”๋“œ๋Š” #61๋กœ ์ถ”๊ฐ€๋˜์—ˆ์œผ๋ฉฐ ๊ฒฐ๊ตญ ์ปค๋ฐ‹ ed21a58fda54774590da729d1a47e2b0b6f5a3a8์—์„œ #81๋กœ ์ด๋™๋˜์—ˆ์Šต๋‹ˆ๋‹ค. ๋ฐ์ดํ„ฐ๊ฐ€ ์ œ๋Œ€๋กœ ํ’€๋ง๋˜๊ณ  ์žˆ๊ณ  crossOrigin์ด ์ˆ˜๋ช… ์ฃผ๊ธฐ ๋“ฑ์—์„œ ์ ์ ˆํ•˜๊ฒŒ ์„ค์ •๋˜์–ด ์žˆ๋Š”์ง€ ํ™•์ธํ•˜๊ธฐ ์œ„ํ•ด ์ด ๋ณ‘ํ•ฉ์„ ์กฐ๊ธˆ ๋” ์กฐ์‚ฌํ•ด์•ผ ํ•ฉ๋‹ˆ๋‹ค.

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