html2canvas์ html2canvas.svg๊ฐ UMD๋ก ๋ฒ๋ค๋์ด ์๊ธฐ ๋๋ฌธ์ ๋ชจ๋ ๋ก๋๋ฅผ ์ฌ์ฉํ๋ ์ ํ๋ฆฌ์ผ์ด์ ์์๋ window.html2canvas๊ฐ ์ ์๋์ง ์์ต๋๋ค.
๊ฒฐ๊ณผ์ ์ผ๋ก ๋น์ ์
"์ ์๋์ง ์์๊ฑฐ๋ 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์์ ์ฌ์ ํ ๋ฌธ์ ๊ฐ ๋ฐ์ํ๋ ์ด์ ๋ฅผ ์ดํด๋ณผ ์ ์์ต๋๊น?
๊ฐ์ฅ ์ ์ฉํ ๋๊ธ
๊ฒฐ๊ณผ์ ์ผ๋ก ๋น์ ์
ํจ๋ธ๋ฆญ์ ์ฌ์ฉํ๋ ค๊ณ ํ ๋๋ง๋ค IE์์ ์ค๋ฅ๊ฐ ๋ฐ์ํฉ๋๋ค.
AMD ํด๊ฒฐ ๋ฐฉ๋ฒ: