Html2canvas: SVG ์ด๋ฏธ์ง€ ํƒœ๊ทธ๊ฐ€ ์ž‘๋™ํ•˜์ง€ ์•Š์Œ

์— ๋งŒ๋“  2015๋…„ 06์›” 11์ผ  ยท  6์ฝ”๋ฉ˜ํŠธ  ยท  ์ถœ์ฒ˜: niklasvh/html2canvas

์ฃ„์†ก ํ•ด์š”, ์ €๋Š” ์˜์–ด๋ฅผ ์ž˜ ๋ชปํ•ด์š”

์•ˆ๋…•ํ•˜์„ธ์š”

SVG ํƒœ๊ทธ๋ฅผ ์บก์ฒ˜ํ•˜๋ ค๊ณ ํ•ฉ๋‹ˆ๋‹ค.

http://jsfiddle.net/geekduck/bgzydk8v/2/

SVG rect ๋ฐ circle ํƒœ๊ทธ๋Š” ์บก์ฒ˜ ํ•  ์ˆ˜ ์žˆ์ง€๋งŒ SVG ์ด๋ฏธ์ง€ ํƒœ๊ทธ๋Š” ์บก์ฒ˜ ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

useCORS ํ•˜๊ณ  img ํƒœ๊ทธ๋ฅผ ์บก์ฒ˜ ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

SVG ์ด๋ฏธ์ง€ ํƒœ๊ทธ์— ๋Œ€ํ•œ ์•„์ด๋””์–ด๊ฐ€ ์žˆ์Šต๋‹ˆ๊นŒ?

๊ฐ์‚ฌ.

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

https://github.com/niklasvh/html2canvas/issues/95 ์—์„œ ์ค‘๋ณต?

์ด ์ˆ˜์ • ์‚ฌํ•ญ์„ ๋ณ‘ํ•ฉํ•˜๋ฉด +1, ๋™์ผํ•œ ๋ฌธ์ œ๊ฐ€ ๋ฐœ์ƒํ•ฉ๋‹ˆ๋‹ค.

ํฅ๋ฏธ๋กœ์šด ๋ฐœ๊ฒฌ-์ด๋ฏธ์ง€์˜ xlink : href ์†์„ฑ์— ์ด๋ฏธ์ง€์˜ base64๋กœ ์ธ์ฝ”๋”ฉ ๋œ ๋ฐ์ดํ„ฐ๋ฅผ ํ‘œ์‹œํ•˜๋ฉด ์ด๋ฏธ์ง€๊ฐ€ html2canvas ์ƒ์„ฑ ์บ”๋ฒ„์Šค์— ๋‚˜ํƒ€๋‚ฉ๋‹ˆ๋‹ค. html2canvas์— ์ด๋ฏธ์ง€์— ๋Œ€ํ•œ ์ƒ๋Œ€ ๊ฒฝ๋กœ๋ฅผ ์ œ๊ณตํ•˜๋ฉด ์ž‘๋™ํ•˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค. ์˜ˆ
<image id="OpenLayers_Geometry_Point_42754" cx="690.6698311208747" cy="286.4667614893988" r="1" preserveAspectRatio="none" x="683" y="278" width="16" height="16" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAABd0lEQVQ4T62Tv0sCYRzGP2eiZdxBST82iYLADGoILmirucmhOaSkoTEsaJGCiJYIJIr6EwKn6A8IrUGi0q2IhshIh7u0FPXiNcXSLjJ6x+/zPp/v8xzvSXx/FMANjFTkCyAO6PXXpQZ/B8solllkqRvV2lrWo4U3XowkeumQFBufPV8BXdI5XvsgIVkkaDx+TSOcT/BojFfFGkCY19rHmGszaVUZh14hmDkjaahi8gEQsWdaA6ab65FzmsZRbp0UmwKg4LLEuHP2/7y6TnU933JvDAuAiqflhKvO73ubUT1pnXhxSgD8+Ozb7Cu2phL4tDwHucV/AfytwlBaJ1GcFAlk+iwxbp0DTVVwpW64L5U/IjgJ4LWvsKvIv4L4NJ1wLsgzW7WH1CtFWHWoLDh+ZuxkYSN7yoMxUXtIVUuPFGXa5mbPJInYfJy/rJobAR91lmiX5pEtXahWe5kdKeTIGE9kSrsitvnPVFNEDw8wWhnFgGvgtb7fO2wpc13ikHF4AAAAAElFTkSuQmCC" style="opacity: 1" fill="#000000" fill-opacity="1" stroke="#000000" stroke-opacity="1" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></image>
๋™์•ˆ ์ž‘๋™
<image id="OpenLayers_Geometry_Point_42880" cx="124.9999999916181" cy="79.99999999953434" r="1" preserveAspectRatio="none" x="112" y="67" width="25" height="25" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/path/to/image/on/server/image.png" style="opacity: 1" fill="#000000" fill-opacity="1" stroke="#000000" stroke-opacity="1" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></image>
ํ•˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค.

+1, ์ €๋„ ๊ฐ™์€ ๋ฌธ์ œ๊ฐ€ ์žˆ์Šต๋‹ˆ๋‹ค. ๋ˆ„๊ฐ€ ํ•ด๊ฒฐํ•  ์ˆ˜ ์žˆ๊ธฐ๋ฅผ ๋ฐ”๋ž๋‹ˆ๋‹ค.

+1, ๋™์ผํ•œ ๋ฌธ์ œ๊ฐ€ ์žˆ์Šต๋‹ˆ๋‹ค. ์ตœ์‹  ๋ฒ„์ „์—์„œ๋Š” ํ•ด๊ฒฐ๋˜์ง€ ์•Š์€ ๊ฒƒ ๊ฐ™์Šต๋‹ˆ๋‹ค. # 998์ด ์ตœ์‹  ๋ฒ„์ „์— ๋ณ‘ํ•ฉ๋˜์ง€ ์•Š์€ ์ด์œ ๋Š” ๋ฌด์—‡์ž…๋‹ˆ๊นŒ?

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