Html2canvas: ๋ชจ๋“ˆ ๋กœ๋”๋ฅผ ์‚ฌ์šฉํ•˜๋Š” ๊ฒฝ์šฐ window.html2canvas๊ฐ€ ์ •์˜๋˜์ง€ ์•Š์Œ

์— ๋งŒ๋“  2016๋…„ 03์›” 24์ผ  ยท  4์ฝ”๋ฉ˜ํŠธ  ยท  ์ถœ์ฒ˜: niklasvh/html2canvas

html2canvas์™€ html2canvas.svg๊ฐ€ UMD๋กœ ๋ฒˆ๋“ค๋˜์–ด ์žˆ๊ธฐ ๋•Œ๋ฌธ์— ๋ชจ๋“ˆ ๋กœ๋”๋ฅผ ์‚ฌ์šฉํ•˜๋Š” ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์—์„œ๋Š” window.html2canvas๊ฐ€ ์ •์˜๋˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค.

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

๊ฒฐ๊ณผ์ ์œผ๋กœ ๋‹น์‹ ์€

"์ •์˜๋˜์ง€ ์•Š์•˜๊ฑฐ๋‚˜ null ์ฐธ์กฐ์˜ ์†์„ฑ 'vg'๋ฅผ ๊ฐ€์ ธ์˜ฌ ์ˆ˜ ์—†์Šต๋‹ˆ๋‹ค"

ํŒจ๋ธŒ๋ฆญ์„ ์‚ฌ์šฉํ•˜๋ ค๊ณ  ํ•  ๋•Œ๋งˆ๋‹ค IE์—์„œ ์˜ค๋ฅ˜๊ฐ€ ๋ฐœ์ƒํ•ฉ๋‹ˆ๋‹ค.

AMD ํ•ด๊ฒฐ ๋ฐฉ๋ฒ•:

require(["html2canvas", "html2canvas.svg"], function(html2canvas, svg) {
  window.html2canvas = {
    svg: svg
  };

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

๊ฒฐ๊ณผ์ ์œผ๋กœ ๋‹น์‹ ์€

"์ •์˜๋˜์ง€ ์•Š์•˜๊ฑฐ๋‚˜ null ์ฐธ์กฐ์˜ ์†์„ฑ 'vg'๋ฅผ ๊ฐ€์ ธ์˜ฌ ์ˆ˜ ์—†์Šต๋‹ˆ๋‹ค"

ํŒจ๋ธŒ๋ฆญ์„ ์‚ฌ์šฉํ•˜๋ ค๊ณ  ํ•  ๋•Œ๋งˆ๋‹ค IE์—์„œ ์˜ค๋ฅ˜๊ฐ€ ๋ฐœ์ƒํ•ฉ๋‹ˆ๋‹ค.

AMD ํ•ด๊ฒฐ ๋ฐฉ๋ฒ•:

require(["html2canvas", "html2canvas.svg"], function(html2canvas, svg) {
  window.html2canvas = {
    svg: svg
  };

babel/es6์„ ์‚ฌ์šฉํ•˜๋Š” ๊ฒฝ์šฐ:

  import html2canvas from 'html2canvas';
  window.html2canvas = {
    svg: html2canvas.svg
  };

์ด ์ž‘์—…์„ ์‹œ๋„ํ–ˆ๋Š”๋ฐ ๋นˆ ์ด๋ฏธ์ง€๊ฐ€ ๋‚˜ํƒ€๋‚ฉ๋‹ˆ๋‹ค. ์ด ๋ฌธ์ œ์˜ ์›์ธ์ด ๋ฌด์—‡์ธ์ง€ ์•Œ ์ˆ˜ ์žˆ์Šต๋‹ˆ๊นŒ?
๋ฒ„์ „ 0.5.0-beta4๋ฅผ ์‚ฌ์šฉํ•˜๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค. ํ•˜๊ณ :
html2canvas(captureTarget, { allowTaint: true }).then(canvas => { let imagex64 = canvas.toDataURL(); });

๋‚ด๊ฐ€ ๊ทธ ์ด๋ฏธ์ง€๋ฅผ ํ‘œ์‹œํ•  ๋•Œ ๋น„์–ด ์žˆ์Šต๋‹ˆ๋‹ค.

MSIE 11.1์—์„œ๋„ ๋™์ผํ•œ ๋ฌธ์ œ๊ฐ€ ์žˆ์—ˆ์ง€๋งŒ Chrome์—์„œ๋Š” ๋ฐœ์ƒํ•˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค.

Nearwood์˜ ํ•ด๊ฒฐ ๋ฐฉ๋ฒ•์— ๋Œ€ํ•œ ๋ณ€ํ˜•์ด ์˜ค๋ฅ˜๋ฅผ ์ค‘์ง€ํ•˜์ง€๋งŒ SVG๊ฐ€ ์ œ๋Œ€๋กœ ๋ Œ๋”๋ง๋˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค.

import * as html2canvas from 'html2canvas';
(window as any).html2canvas = {
    svg: html2canvas.svg
};

@niklasvh , ์™œ ์ด๊ฒƒ์„ ๋‹ซ์•˜์Šต๋‹ˆ๊นŒ? ๊ณ ์ •๋œ ์ƒ๊ฐ์ธ๊ฐ€์š”? ์ด ๋ฌธ์ œ๋ฅผ ์ฐธ์กฐํ•˜๋Š” ์ปค๋ฐ‹์ด ํ‘œ์‹œ๋˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค. Chrome์—์„œ ์ด ๋ฌธ์ œ๋ฅผ ํ•ด๊ฒฐํ•œ ๋งํฌ๊ฐ€ ์žˆ์Šต๋‹ˆ๊นŒ? ๊ทธ๋ž˜์„œ MSIE์—์„œ ์—ฌ์ „ํžˆ ๋ฌธ์ œ๊ฐ€ ๋ฐœ์ƒํ•˜๋Š” ์ด์œ ๋ฅผ ์‚ดํŽด๋ณผ ์ˆ˜ ์žˆ์Šต๋‹ˆ๊นŒ?

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