์๋ ํ์ธ์,
html2canvas๋ฅผ ์ฌ์ฉํ์ฌ html์ ์ด๋ฏธ์ง๋ก ๋ณํํ๋ ค๊ณ ์๋ํ๋๋ฐ ์ ์๋ํฉ๋๋ค. ๊ทธ๋ฌ๋ html ์์ ๋ด๋ถ์ ์ด๋ฏธ์ง ํ๊ทธ๋ ๋ณํ๋์ง ์์ต๋๋ค. ์๋์ ํ ๊ฐ์ง ์๊ฐ ์์ต๋๋ค.
๋ชจ | ํฌ | ์ฐ๋ฆฌ | NS | ์ ๋ง๋ก | ์ฌ | ์ |
---|---|---|---|---|---|---|
26 | 27 | 28 | 29 | 30 | 31 | 1 |
2 ๋ฒจ ์ค๋
|
๋ค์์ html2canvas๋ฅผ ๋ณํํ๋ ์คํฌ๋ฆฝํธ์ ๋๋ค.
var html2obj = html2canvas($('ํ
์ด๋ธ'));
var ๋๊ธฐ์ด = html2obj.parse();
var ์บ๋ฒ์ค = html2obj.render(๋๊ธฐ์ด);
var img = ์บ๋ฒ์ค.toDataURL();
$('#calendar_to_canvas').attr('src', img);
PFA ์คํฌ๋ฆฐ์ท
๊ฐ์ฌ ํด์,
๋ฐ๋ผ
์์ฒด์ ์ผ๋ก ๋น๋๊ธฐ์์ธ ์ด๋ฏธ์ง์ ์ฌ์ ๋ก๋๊ฐ ๋๋ฝ๋์์ผ๋ฏ๋ก ์ด๋ฅผ ์ฝ๋ฐฑ์ผ๋ก ๋ํํด์ผ ํฉ๋๋ค. ์๋ง๋ ์ด์ ๋ฒ์ ๋ ์ฌ์ฉ ์ค์ผ ๊ฒ์ด๋ฏ๋ก https://github.com/niklasvh/html2canvas/downloads ์์ ์ต์ ๋ฒ์ ์ ์ป์ ๋ค์ ๋ค์์ ์ฌ์ฉํ์ฌ ํ ์คํธํ๋ ๊ฒ์ด ์ข์ต๋๋ค.
html2canvas( $('table'), {
onrendered: function( canvas ) {
var img = canvas.toDataURL();
$('#calendar_to_canvas').attr('src', img);
}
});
๋น ๋ฅธ ์๋ต์ ๊ฐ์ฌ๋๋ฆฝ๋๋ค. ์ต์ ๋ฒ์ ์ ๋ค์ด๋ก๋ํ๊ณ ์์ ์ฝ๋๋ฅผ ์๋ํ์ง๋ง ์ฌ์ ํ ๋ ๋๋ง๋ ์บ๋ฒ์ค์ ์ด๋ฏธ์ง ํ๊ทธ๊ฐ ํ์๋์ง ์์ต๋๋ค. ๋ด๊ฐ ๋๋ฝ ๋ ๊ฒ์ด ์์ต๋๊น? html2canvas.js, jquery.plugin.html2canvas๋ฅผ ์ถ๊ฐํ๊ณ jquery 1.7์ ์ฌ์ฉํ์ต๋๋ค. ๊ทํ์ ๋์์ ๊ฐ์ฌ๋๋ฆฝ๋๋ค.
์ด๋ฏธ์ง๊ฐ ๋ ๋๋ง ์ค์ธ ํ์ด์ง ์ ๋์ผํ ์ถ์ฒ์์ ํธ์คํ ๋ฉ๋๊น?
logging: true
์ค์ ํ๊ณ ์ฝ์์ด ์ด๋ฏธ์ง์ ๋ํด ๋งํ๋ ๋ด์ฉ์ ํ์ธํฉ๋๋ค. ์ด๋ฏธ์ง๊ฐ ์คํจํฉ๋๊น?
์ด๋ฏธ์ง๊ฐ ์๋ฒฝํ๊ฒ ๋ก๋๋๊ณ ์์ต๋๋ค. ์๋ ๋ก๊ทธ๋ฅผ ์ฐธ์กฐํ์ธ์.
html2canvas: ์ฌ์ ๋ก๋ ์์: ๋ฐฐ๊ฒฝ ์ด๋ฏธ์ง ์ฐพ๊ธฐ html2canvas.js:27
html2canvas: ์์: ์ด๋ฏธ์ง: 1 / 1 (์คํจ: 0) html2canvas.js:27
html2canvas: ์์: ์ด๋ฏธ์ง: 2 / 2 (์คํจ: 0) html2canvas.js:27
html2canvas: ์์: ์ด๋ฏธ์ง: 3 / 3 (์คํจ: 0) html2canvas.js:27
html2canvas: ์์: ์ด๋ฏธ์ง: 4 / 4 (์คํจ: 0) html2canvas.js:27
html2canvas: ์์: ์ด๋ฏธ์ง: 5 / 5 (์คํจ: 0) html2canvas.js:27
html2canvas: ์์: ์ด๋ฏธ์ง: 6 / 6 (์คํจ: 0) html2canvas.js:27
html2canvas: ์์: ์ด๋ฏธ์ง: 7 / 7 (์คํจ: 0) html2canvas.js:27
html2canvas: ์ฌ์ ๋ก๋: ์ด๋ฏธ์ง ์ฐพ๊ธฐ html2canvas.js:27
html2canvas: ๋ฏธ๋ฆฌ ๋ก๋: ์๋ฃ. html2canvas.js:27
html2canvas: ์์: ์ด๋ฏธ์ง: 8 / 18 (์คํจ: 0) html2canvas.js:27
html2canvas: ์์: ์ด๋ฏธ์ง: 9 / 18 (์คํจ: 0) html2canvas.js:27
html2canvas: ์์: ์ด๋ฏธ์ง: 10 / 18 (์คํจ: 0) html2canvas.js:27
html2canvas: ์์: ์ด๋ฏธ์ง: 11 / 18 (์คํจ: 0) html2canvas.js:27
html2canvas: ์์: ์ด๋ฏธ์ง: 12 / 18 (์คํจ: 0) html2canvas.js:27
html2canvas: ์์: ์ด๋ฏธ์ง: 13 / 18 (์คํจ: 0) html2canvas.js:27
html2canvas: ์์: ์ด๋ฏธ์ง: 14 / 18 (์คํจ: 0) html2canvas.js:27
html2canvas: ์์: ์ด๋ฏธ์ง: 15 / 18 (์คํจ: 0) html2canvas.js:27
html2canvas: ์์: ์ด๋ฏธ์ง: 16 / 18 (์คํจ: 0) html2canvas.js:27
html2canvas: ์์: ์ด๋ฏธ์ง: 17 / 18 (์คํจ: 0) html2canvas.js:27
html2canvas: ์์: ์ด๋ฏธ์ง: 18 / 18 (์คํจ: 0) html2canvas.js:27
์ด๋ฏธ์ง ๋ก๋ ์๋ฃ: # 18 (์คํจ: 0) html2canvas.js:27
์บ๋ฒ์ค๊ฐ ์๋ณธ ๊ฐ ๋ฐ์ดํฐ๋ก ์ค์ผ๋์๊ธฐ ๋๋ฌธ์ ์บ๋ฒ์ค์์ ์ด๋ฏธ์ง ๋ฐ์ดํฐ๋ฅผ ๊ฐ์ ธ์ฌ ์ ์์ต๋๋ค.
html2canvas: ๋ ๋๋ฌ: ์บ๋ฒ์ค ๋ ๋๋ฌ ์๋ฃ - ์บ๋ฒ์ค obj ๋ฐํ
์๋ฐ ์คํฌ๋ฆฝํธ ํ์ผ๊ณผ ์ด๋ฏธ์ง๋ ์ด์ ์ฃผ์์ ์ถ๊ฐํ์ฌ ๋์ผํ ๋๋ ํ ๋ฆฌ์ ์์ต๋๋ค.
์๋ ํ์ธ์ niklasvh, ๊ทธ๊ฒ์ ๋์ผํ ์๋ ์ ์ฑ ๋ฌธ์ ๋ฅผ ์๋ฒฝํ๊ฒ ์๋ํ์ต๋๋ค. ์ด์ ์ file://์ ์ฌ์ฉํ์ฌ ๋ก์ปฌ๋ก ์คํ๋์๋ ์น ์๋ฒ์์ ์คํํ๋ ๊ฒ์ ํด๊ฒฐํ์ต๋๋ค. ์ด๊ฒ์ ๋๋ฉ์ธ ๊ฐ ๋ฌธ์ ๋ก ๋ณด์ ๋๋ค. ์ฌ๋ฐ๋ฅธ ๋ฐฉํฅ์ผ๋ก ์ธ๋ํด์ฃผ์ ์ ๊ฐ์ฌํฉ๋๋ค. ์ด๊ฒ์ ํ๋ฅญํ ํ๋ฌ๊ทธ์ธ์ ๋๋ค :)
Niklashvh ์ ๋ file://์ ์ฌ์ฉํ์ฌ ๋ก์ปฌ๋ก ์คํ๋๋ Android ํ์ด๋ธ๋ฆฌ๋ ์ฑ์ ๋ํด ์ด ์์ ์ ์ํํ๋ ค๊ณ ํฉ๋๋ค.
์ด๋ฏธ์ง๋ฅผ ์๋ฌด๋ฐ๋ ๋ด๋ณด๋ผ ํ์๊ฐ ์์ผ๋ฉด ์ธ์ ๋ ์ง allowTaint: true
์ค์ ํ ์ ์์ต๋๋ค.
์ด๋ฏธ์ง๋ฅผ ๋ฉ๋ชจ๋ฆฌ๋ก ๋ด๋ณด๋ด๊ณ ์ด๋ฉ์ผ๋ก pdf๋ก ์ ์ก ์ค์ ๋๋ค.
๋์ผํ ๋ฌธ์ ๊ฐ ์์ต๋๋ค. ๋ก๊ทธ๋ ๋ค์๊ณผ ๊ฐ์ต๋๋ค.
html2canvas: ์ฌ์ ๋ก๋ ์์: html2canvas.js ๋ฐฐ๊ฒฝ ์ด๋ฏธ์ง ์ฐพ๊ธฐ: 21
html2canvas: ์ฌ์ ๋ก๋: ์ด๋ฏธ์ง ์ฐพ๊ธฐ html2canvas.js: 21
html2canvas: ๋ฏธ๋ฆฌ ๋ก๋: ์๋ฃ. html2canvas.js 21
html2canvas: ์์: ์ด๋ฏธ์ง: 1/2 (์คํจ: 0) html2canvas.js: 21
html2canvas: ์์: ์ด๋ฏธ์ง: 2/2 (์คํจ: 0) html2canvas.js: 21
์ด๋ฏธ์ง ๋ก๋ ์๋ฃ: # 2 (์คํจ: 0) html2canvas.js: 21
html2canvas: ๋ ๋๋ฌ: ์บ๋ฒ์ค ๋ ๋๋ฌ ์๋ฃ - obj ์บ๋ฒ์ค ๋ฐํ
์ด๋ฏธ์ง๋ ๋ฐฐ๊ฒฝ ์ด๋ฏธ์ง์ ์์ผ๋ฉฐ ๊ธฐ๋ณธ ์ด๋ฏธ์ง div๋ฅผ ๋ก๋ํ๊ธฐ๋ง ํ๋ฉด ์๊ฐ์๊ฐ ํ์๋์ง ์์ต๋๋ค.
์ด๋ฏธ์ง ๊ต์ฐจ๊ฐ ๋์ผํ ๋๋ฉ์ธ์ ์์ผ๋ฏ๋ก ๋ฌธ์ ๊ฐ ๋์ง ์์ต๋๋ค.
์ด๋ค ์์ด๋์ด๋ผ๋?
"background-size: cover;"๋ฅผ ์ถ๊ฐํ๋ฉด ์คํ์ผ์ ์ด๋ฏธ์ง๊ฐ ๋ํ๋์ง ์์ต๋๋ค ...
๋ถ๋ช ํ ์ด๊ฒ์ด ๋ฌธ์ ์ ๋๋ค
์๋ํ์ต๋๋ค!! "background-size: 100% 100%;"๋ง ์ ๋ ฅํ๋ฉด ๋ฉ๋๋ค. "background-size: cover;" ๋์
img์ ํจ๊ป ์จ๋ผ์ธ URL์ ์ฌ์ฉํ ๋ HTML@Canvas ๊ฐ ์บก์ฒ๋์ง ์์ต๋๋ค. ์ด ๋ฌธ์ ์ ๋ํ ํด๊ฒฐ์ฑ
์ ๋ฌด์์
๋๊น?
๊ฐ์ฌ ํด์
@Elgamal10 ํ๋ก์ ์ฌ์ฉ
https://github.com/brcontainer/html2canvas-php-proxy(php๊ฐ ์๋ html2canvas ํ๋ก์)
https://github.com/brcontainer/html2canvas-asp-vbscript-proxy(asp-classic์ด ์๋ html2canvas ํ๋ก์ - vb)
https://github.com/brcontainer/html2canvas-csharp-proxy(asp.net์ด ์๋ html2canvas ํ๋ก์ - csharp)
์ฐธ๊ณ : README.md ํ์ผ ์ฝ๊ธฐ
๋ต์ฅ์ ๋ณด๋ด์ฃผ์ ์ ๊ฐ์ฌํฉ๋๋ค. ํ๋ฉด ์ดฌ์์ ์ ๋์ง๋ง ๋ค์๊ณผ ๊ฐ์ ์ค๋ฅ๊ฐ ์์ต๋๋ค.
html2canvas_5๊ฐ ์ ์๋์ง ์์์ต๋๋ค
html2canvas_0์ด ์ ์๋์ง ์์์ต๋๋ค
html2canvas_5๊ฐ ์ ์๋์ง ์์์ต๋๋ค.
html2canvas_4๊ฐ ์ ์๋์ง ์์์ต๋๋ค.
html2canvas_1์ด ์ ์๋์ง ์์์ต๋๋ค
html2canvas_5๊ฐ ์ ์๋์ง ์์์ต๋๋ค.
@Elgamal10 ํ๋ก์ ํธ์์ ์ด์ ์์ฑ
https://github.com/brcontainer/html2canvas-csharp-proxy/issues?state=open
๋๋ ๋น์ ์ด C#(ASP.NET)์ ์ฌ์ฉํ๋ค๊ณ ์๊ฐํฉ๋๋ค. ๋ง์ต๋๊น?
์๋ ํ์ธ์ ๋ํด๋ผ์ค ,
๋๋ ๋น์ ์ API๋ฅผ ์ฌ์ฉํ๊ธฐ ์์ํ๊ณ ํ๋ฅญํฉ๋๋ค. ํ์ง๋ง ๋งํ์ต๋๋ค. ๋์์ฃผ์ธ์.
์ฝ๋๋ฅผ ์ฌ์ฉํ์ฌ html์ ์บ๋ฒ์ค๋ก ๋ณํํ๋ ค๊ณ ํฉ๋๋ค.
jQuery('html').html2canvas({
ํ๋ก์:" http://localhost/myproject/proxy.jsp ",
userCORS:์ฐธ ,
๋ ๋๋ง: ํจ์(์บ๋ฒ์ค) {
๊ฒฝ๊ณ (์บ๋ฒ์ค);
var url = ์บ๋ฒ์ค.toDataURL("์ด๋ฏธ์ง/png");
window.open(url, '_blank');
},
});
์ด์ ~/tomcat/myproject/images/ ๊ฒฝ๋ก์ ๋ชจ๋ ๊ต์ฐจ ์๋ณธ ์ด๋ฏธ์ง๋ฅผ ์ ์ฅํ๋ proxy.jsp๋ผ๋ ํ์ผ์ด ์์ต๋๋ค."
๊ทธ ํ ๋๋ ์ฝ์์์ ์ด๊ฒ์ ๋ด
๋๋ค.
๋ฆฌ์์ค๊ฐ ์คํฌ๋ฆฝํธ๋ก ํด์๋์ง๋ง MIME ์ ํ image/jpeg๋ก ์ ์ก๋จ: " http://localhost/myproject/proxy.jsp?url=http%3A%2F%2Fi.ebayi โฆQYEAAMXQVERSuVtL%2F%24_1.JPG%3Fset_id%3D8800004005&callback= html2canvas_64". html2canvas.js:2264
์ด ๋ชจ๋ ํ์ ๋ด ์ฝ๋ฐฑ ๊ธฐ๋ฅ์ด ์คํ๋์ง ์๊ณ ์บ๋ฒ์ค๋ฅผ ๋ง๋ค ์ ์์ต๋๋ค..
๋ฌด์์ ํ ์ ์์ต๋๊น? ๋์์ฃผ์๊ฒ ์ด์?
๋ง์ ๊ฐ์ฌ
@himakshi89 proxy:
์ userCORS:
๋ฅผ ๋์์ ์ฌ์ฉํ ์ ์์ต๋๋ค.
ํ๋ก์ ์ฌ์ฉ์ ์ ํธํฉ๋๋ค.
์ฐธ๊ณ : ์์ฒด๋ฅผ ์บก์ฒํ์ญ์์ค.
์ฝ๋์ ์ผํ๊ฐ ๋จ์ ์์ต๋๋ค.
},//this is wrong.
});
html2canvas์ ๋ฒ์ ์ ๋ฌด์์ ๋๊น?
์ด ์๋:
jQuery('body').html2canvas({
"onrendered": function(canvas) {
}
});
์๋ํ์ง ์์ผ๋ฉด https://github.com/niklasvh/html2canvas/releases/download/0.4.1/html2canvas.js ์์ html2canvas๋ฅผ ๋ค์ด๋ก๋ํ๊ณ ๋ค์ ์ฝ๋๋ฅผ ์ฌ์ฉ
html2canvas($("body").get(0), {
"logging": true,
"proxy": "http://localhost/myproject/proxy.jsp",
"onrendered": function(canvas) {
alert(canvas);
var url = canvas.toDataURL("image/png");
window.open(url, "_blank");
}
});
@brcontainer
์๋
ํ์ธ์
๋ด ์ฝ๋๋ฅผ ์์ ํ์ผ๋ฉฐ ์ด์ proxy.jsp์์ ๋ค์๊ณผ ๊ฐ์ด ์๋ต์ ๋ณด๋ด๊ณ ์์ต๋๋ค.
({"html2canvas_67":http://localhost/myproject/0.1651487380333363.jpg"})
์ด์ ์ฝ์์ ์ค๋ฅ๊ฐ ํ์๋์ง ์์ต๋๋ค.
ํ์ง๋ง ์ง๊ธ์ ์๋ฌด ์ผ๋ ์ผ์ด๋์ง ์์ต๋๋ค. ๋ฌด์จ ์ผ์ด ์ผ์ด๋์ผ ํฉ๋๊น, ์๋๋ฉด ๋ฐ๊ฟ์ผ ํ ๊ณณ์ด ์์ต๋๊น?
๋์์ฃผ์ธ์
๊ทธ๋ฌ๋ ์ฝ์์ ์๋ฌด๊ฒ๋ ๋ณด์ฌ์ค ์ ์๊ธฐ ๋๋ฌธ์
๋ ๋ฒ์งธ ์ํ ์ฝ๋๋ฅผ ์ฌ์ฉํ์ต๋๊น? ์ฝ์์ ๋ก๊ทธ๋ฅผ ๋ณด๋
๋๋ค.
์ฝ๋๋ฅผ ์จ๋ผ์ธ์ผ๋ก ํ ์คํธํ ์ ์๋ ๋ฐฉ๋ฒ์ ์ ๊ณตํ์ญ์์ค.
์ ์ํ๋๋ก useCORS๋ฅผ ์ ๊ฑฐํ๊ณ html์ ๋ณธ๋ฌธ์ผ๋ก ๋ฐ๊ฟ๋๋ค.
jQuery('๋ฐ๋').html2canvas({
ํ๋ก์:" http://nisquare.dyndns.org :8087/facebook/proxy.jsp",
๋ก๊น
:true ,
๋ ๋๋ง: ํจ์(์บ๋ฒ์ค) {
var url = ์บ๋ฒ์ค.toDataURL("์ด๋ฏธ์ง/png");
window.open(url, '_blank');
}
});
๋๋ ๋ํ ์ด๊ฒ์ด ๋ด ์ฝ์์์ ๋ฐ๊ณ ์์ต๋๋ค.
html2canvas: ๋ก๋ ์ค๋ฅ : http://cmsip.tradus.ibcdn.com/MOBMKXE29ULYUMKH_4902586_320x360.jpg html2canvas.js:21
๋ด๊ฐ ์ป๋ ๊ฒ์ ์คํฌ๋ฆฐ ์ท์ ์ฒจ๋ถํ์ต๋๋ค.
https://github.com/niklasvh/html2canvas/releases/download/0.4.1/html2canvas.js ๋ค์ด๋ก๋๋ฅผ ์๋ํ์ต๋๋ค.
๊ทธ๋ฆฌ๊ณ ์ด ์ฝ๋:
html2canvas($("body").get(0), {
"logging": true,
"proxy": "http://localhost/myproject/proxy.jsp",
"onrendered": function(canvas) {
alert(canvas);
var url = canvas.toDataURL("image/png");
window.open(url, "_blank");
}
});
์๋๋ฉด?
์ฐธ๊ณ : http://nisquare.dyndns.org:8087/facebook/proxy.jsp
๊ฐ ๊นจ์ก์ต๋๋ค!
๋๋ ์ต์ ๋ฒ์ ์ ๋ค์ด๋ก๋ํ๋ค
๋๋ ๋ค์๊ณผ ๊ฐ์ด ์ฝ๋๋ฅผ ๋์ฒด
html2canvas($("๋ฐ๋").get(0), {
ํ๋ก์:" http://nisquare.dyndns.org :8087/facebook/proxy.jsp",
๋ก๊น
:true ,
๋ ๋๋ง: ํจ์(์บ๋ฒ์ค) {
var url = ์บ๋ฒ์ค.toDataURL("์ด๋ฏธ์ง/png");
window.open(url, '_blank');
}
});
๋งํฌ ํ ์คํธ๋ฅผ ๋ณด๋ด์ฃผ์ธ์
๋๋ ์ด๊ฒ์ ํฌ๋กฌ ํ์ฅ ํ๋ก๊ทธ๋จ์ผ๋ก ์ฌ์ฉํ๊ณ ์์ผ๋ฉฐ ํ์ฅ ํ๋ก๊ทธ๋จ์ ์์ง ๊ฐ๋ฐ ๋ชจ๋์ ์์ต๋๋ค.
JSP๋ฅผ ์ฌ์ฉํ "ํฌ๋กฌ ํ์ฅ"?
jsp๋ ํ๋ก์ ๋ถ๋ถ์๋ง ์ฌ์ฉ๋ฉ๋๋ค. ๋ ๋ฐ๋์งํ ๊ฒ์ ๋ฌด์์ ๋๊น?
Chrome ํ์ฅ ํ๋ก๊ทธ๋จ์ ๋ค๋ฅธ "ํ๋กํ ์ฝ" ๋ฐ "ํ๋ ์"์์ ์คํ๋๋ฉฐ, proxy.jsp๋ HTTP ํ๋กํ ์ฝ์ ์ฌ์ฉํฉ๋๋ค.
ํฌ๋กฌ ํ์ฅ์๋ ํ๋ก์๊ฐ ํ์ํ์ง ์๋ค๊ณ ์๊ฐํฉ๋๋ค. ๋ค์๊ณผ ๊ฐ์ด ์ฌ์ฉํ์ญ์์ค.
html2canvas($("body").get(0), {
"logging": true,
"onrendered": function(canvas) {
alert(canvas);
var url = canvas.toDataURL("image/png");
window.open(url, "_blank");
}
});
์ฝ๊ธฐ: http://developer.chrome.com/extensions/tut_debugging.html
@brcontainer
์์ด๋์ด ์ฃผ์
์ ๊ฐ์ฌํฉ๋๋ค. ์ด์ ํฌ๋กฌ ์์ฒด์์ ์ ๊ณตํ๋ API๋ฅผ ์ฌ์ฉํ๊ณ ์์ต๋๋ค. ๊ทธ๊ฒ์ ๋งค์ฐ ์ฝ๊ฒ ๋๋ ๋ฌธ์ ๋ฅผ ํด๊ฒฐํ๋ ๊ธฐ๋ฅ chrome capturevisibletab์ด ์์ต๋๋ค :)
@jgab-net ์ ๋ง ๊ฐ์ฌํฉ๋๋ค. ์ค๋ฅ์ ๋ํด ๋๋ฌด ์ค๋ ๊ฒ์ํ์ต๋๋ค.
@ Sumit8 (Y) ์ฒ๋ง์์
@gitbala ๋ฌธ์ ๊ฐ ํด๊ฒฐ๋์์ต๋๊น? @niklasvh ์ด ๋ฌธ์ ๋ฅผ ํด๊ฒฐํ ์ ์์ต๋๊น? (์ด๊ฒ ๊ท์ฐฎ๋ค๋ฉด ๋ฒ๊ทธ ๋ถ๋ฅ๋ก ๊ทธ๋งํ๊ฒ ์ต๋๋ค.. :)
@usmonster ๋ ๊ณ์ํด์ ๋ชจ๋ ๋ฏธํด๊ฒฐ ๋ฌธ์ ๋ฅผ ์ดํด๋ณด๋ ๋ฐ ์๊ฐ์ ์ ์ฝํ ์ ์์ต๋๋ค. :)
๋ค ํด๊ฒฐ๋์์ต๋๋ค :)
2014๋ 9์ 1์ผ ์์์ผ ์ค์ 4์ 11๋ถ์ usmonster [email protected]์์ ๋ค์๊ณผ ๊ฐ์ด ์ผ์ต๋๋ค.
@gitbala https://github.com/gitbala ๋ฌธ์ ๊ฐ ํด๊ฒฐ๋์์ต๋๊น? @niklasvh
https://github.com/niklasvh ์ด ๋ฌธ์ ๋ฅผ ํด๊ฒฐํ ์ ์์ต๋๊น? (๋๋ ๊ทธ๋งํ๊ฒ ๋ค.
๋ฒ๊ทธ ๋ถ๋ฅ๋ ์ด๊ฒ ์ง์ฆ๋๋ค์.. :)โ
์ด ์ด๋ฉ์ผ์ ์ง์ ๋ต์ฅํ๊ฑฐ๋ GitHub์์ ํ์ธํ์ธ์.
https://github.com/niklasvh/html2canvas/issues/145#issuecomment -54047596
.
html2canvas๋ฅผ ์ฌ์ฉํ๊ณ ์์ต๋๋ค. ๋ก์ปฌ ์ด๋ฏธ์ง๊ฐ pdf๋ก ๋ ๋๋ง๋์ง ์์ต๋๋ค. ์ด์ ๋ํ ํด๊ฒฐ์ฑ ์ ๋ฌด์์ ๋๊น?
@niklasvh pls help - html์ ๋ก๊ณ ์ด๋ฏธ์ง๊ฐ pdf๋ก ๋ ๋๋ง๋์ง ์์ต๋๋ค.
์ธ๋ผ์ธ image.how to use "proxy": " http://localhost/myproject/proxy.jsp "๋ฅผ ๋ณํํ ๋ ์คํจํ์ต๋๋ค. ์ ๋ vue๋ฅผ ์ฌ์ฉํฉ๋๋ค. ์ด jsp๋ฅผ ์ด๋์ ๋ฃ์์ง ๋ชจ๋ฅด๊ฒ ์ต๋๋ค. @niklasvh ๋ฅผ ์ฌ์ฉํ๋ ๋ฐฉ๋ฒ์ ์ ์ ์์ต๋๋ค. ๋๋ค?
@qiuyaofan ๊ฐ์ ๋ฌธ์ ๊ฐ ๋ฐ์ํ์ฌ ์๋ฃจ์ ์ ์ป์์ต๋๊น? angular2์ ํจ๊ป ์ฌ์ฉํ๊ณ ๋ค๋ฅธ ์๋ฒ์์ ์ด๋ฏธ์ง๋ฅผ ๊ฐ์ ธ์ต๋๋ค. @gitbala ์๋ฃจ์ ์ ์ป์์ต๋๊น?
+1 BTW ๋ก๊ทธ๋ ์ข์ ๋ณด์ด์ง๋ง( html2canvas: Images loaded, starting parsing
) ์ฌ์ ํ pdf์ ์ด๋ฏธ์ง๊ฐ ํ์๋์ง ์์ต๋๋ค.
์ฌ์ฉ ์ค
allowTaint: ์ฌ์ค,
useCORS: ์ฌ์ค,
taintTest: ๊ฑฐ์ง,
@NikhilRadadiya @qiuyaofan ์ฌ๋ฌ๋ถ, ๋ํ ์ ๋นํ ํด๋ผ์ด์ธํธ ์ธก ์๋ฃจ์ ์ ์ฐพ๊ณ ์์์ต๋๋ค. vue js๋ฅผ ์ฌ์ฉํ๊ณ giphy์์ ์ด๋ฏธ์ง๋ฅผ ๊ฐ์ ธ์ต๋๋ค. ๊ทธ๋์ ์ฌ๊ธฐ ์ ์๊ฒ ์ ๋ง๋ ๊ฒ์ด ์์ต๋๋ค.
html2canvas(element, {
"logging": true, //Enable log (use Web Console for get Errors and Warings)
useCORS: true,
taintTest: false,
onrendered: function(canvas) {
var img = new Image();
img.onload = function() {
document.body.appendChild(img);
};
img.error = function() {
if(window.console.log) {
window.console.log("Not loaded image from canvas.toDataURL");
} else {
alert("Not loaded image from canvas.toDataURL");
}
};
img.src = canvas.toDataURL("image/png");
}
});
๋ฐ๋ผ์ ํ๋ก์๊ฐ ์ฌ์ฉ๋์ง ์์์ต๋๋ค.
@creepteed ์บ๋ฒ์ค๋ก ๋ณํํ ๋ค์ pdf๋ก ์ ์ฅํด์ผ ํ๋ ๋ค๋ฅธ ์์๊ฐ ์์ต๋๋ค. ๋ด html์๋ ์ด๋ฏธ์ง๋ง ํฌํจ๋์ด ์์ง ์์ต๋๋ค. ์ด ๊ฒฝ์ฐ ๊ฒ์ํ ์์ ๊ธฐ๋ฅ์ ์ด๋ป๊ฒ ์ฌ์ฉํ ์ ์์ต๋๊น?
์๋
ํ์ธ์ @niklasvh ๋ ,
htmltocanvas๋ฅผ ์ฌ์ฉํ์ฌ ์น ํ์ด์ง๋ฅผ ์บก์ฒํ๊ณ ์ถ์ต๋๋ค. ๋ชจ๋ ์ ๋๋ก ์๋ํ์ง๋ง ์น ํ์ด์ง๋ฅผ ์บก์ฒํ๋ ค๊ณ ํ ๋ ์ด๋ฏธ์ง๊ฐ ํ์๋์ง ์์ต๋๋ค.
๋์์ฃผ์ธ์?
๋ด ์ฝ๋๋ ๋ค์๊ณผ ๊ฐ์ต๋๋ค.
function capture(div_id=null) {
jQuery(".screenshot_row_target").html2canvas({
logging: true, //taintTest : true, //proxy: "https://skeleton-21.myshopify.com", onrendered: function (canvas) { jQuery('#screenshot_img_val').val(canvas.toDataURL("image/png")); //document.getElementById("screenshot_html_form").submit(); } }); }
์ฝ์์์ ๋๋ ์ด๊ฒ์ ์ป๋๋ค.
html2canvas: Preload starts: finding background-images
html2canvas.js:19 html2canvas: Preload: Finding images
html2canvas.js:19 html2canvas: Preload: Done.
html2canvas.js:19 html2canvas: start: images: 0 / 0 (failed: 0)
html2canvas.js:19 Finished loading images: # 0 (failed: 0)
html2canvas.js:19 html2canvas: Error loading <img>://cdn.shopify.com/s/files/1/2186/4293/files/user2_300x300.png?v=1503661428
html2canvas.js:19 html2canvas: Error loading background:
html2canvas.js:19 html2canvas: Error loading <img>://cdn.shopify.com/s/assets/no-image-2048-5e88c1b20e087fb7bbe9a3771824e743c244f437e4f8ba93bbf7b11b53f7824c_300x300.gif
html2canvas.js:19 html2canvas: Renderer: Canvas renderer done - returning canvas obj
๊ฐ์ฌ ํด์.
๊ฐ์ฅ ์ ์ฉํ ๋๊ธ
์๋ํ์ต๋๋ค!! "background-size: 100% 100%;"๋ง ์ ๋ ฅํ๋ฉด ๋ฉ๋๋ค. "background-size: cover;" ๋์