ããã«ã¡ã¯ãã¿ããªïŒ
ããªãã®ä»äºã«æè¬ããŸããh2cã¯çŽ æŽãããããŒã«ã§ãïŒ
ããŒãžã«å°ããªåé¡ã1ã€ãããŸãïŒ http ïŒ
æ¬æ{...èæ¯ïŒïŒ070707 urlïŒ../ img / bg.jpgïŒç¹°ãè¿ããªã50ïŒ
0;
ã¬ã³ããªã³ã°ããŸããã h2cãåŒã³åºãã ãã§ïŒ
html2canvas($('body'), {
allowTaint: false,
logging:true,
onrendered: function (canvas) {
document.body.appendChild(canvas);
}
});
ãã¹ãã³ã³ãœãŒã«http://html2canvas.hertzen.com/screenshots.htmlã§ãåãçµæãåŸãããŸãã
ãªãªãžãã«ïŒ
ã¬ã³ããªã³ã°ïŒ
html2canvasïŒ0.4.0
MacOs 10.6 Chrome 29.0.1547.62
ããããšãïŒ
0.4.1ïŒéçºãã©ã³ãå ïŒã§ä¿®æ£ãããŠããããã§ãã ããããïŒ256ã«é¢é£ããŠãã
0.4.1ã§è©ŠããŠãåé¡ããŸã ååšãããã©ããã確èªã§ããŸããïŒ
ããã«ã¡ã¯ã ç§ã¯ãŸã£ããåãåé¡ãæ±ããŠããŸãã ã¯ããåé¡ã¯ãŸã 0.4.1ã«ååšããŸãã ãã¹ãŠã®å©ããããããšãã
ç§ã¯åãåé¡ãæ±ããŠããŸã...ãŸã 解決çã¯ãããŸããïŒ ãã®çŽ æŽãããã¹ã¯ãªãããæäŸããŠãããNiklasã«æè¬ããŸãã
ãã®ã³ãŒãã¯ã¬ã³ããªã³ã°ãããŸããã
div class = "mc-image" title = "" style = "background- imageïŒurl ïŒ 'http://eterni-t.design.s3.amazonaws.com/381/theme-154-original-1.jpg' ïŒ;å¹
ïŒ1025px;é«ãïŒ780px; z-ã€ã³ããã¯ã¹ïŒ9999 "
background-sizeïŒcover;ãåé€ãããšæ°ã¥ããŸããã ç§ã®class = "mc-image"ããã¯æ©èœããŸãã
@ ymorin007 MacãšChrome / Opera / Safariã䜿çšããŠããããææ°ã®ã³ãããã䜿çšããŠããŸããïŒã€ãŸããã¹ã¯ãªãããèªåã§äœæããŠããŸããïŒïŒ
Windows7ChromeããŒãžã§ã³30.0.1599.101m
äžæçãªä¿®æ£ïŒ
è¡2818ãã«å€æŽããŸã
ctx.fillStyle = (options.background !== undefined) ? options.background : parsedData.backgroundColor;
ããã¯ãèæ¯ãµã€ãºã®2ã€ã®ãªãã·ã§ã³ã§ããcontainãŸãã¯coverã«ç¢ºå®ã«é¢é£ããŠããŸãã
ææ°ã®ã³ãããïŒhtml2canvas 0.4.1ïŒã§ä¿®æ£ãããŸãã
é±å±±ã¯ãææ°ã®ã³ãããåŸããŸã ãããè¡ã£ãŠããŸã...
ç§ã®background-size㯠'cover'ã«èšå®ãããŠããã 'auto 100ïŒ 'ãè©ŠããŸããããããã§ãçœ/éæã§ãã
èæ¯ãµã€ãºãåé€ãããšãåé¡ãªããã£ããã£ãããŸã...ä»ã«ãã³ãã¯ãããŸããïŒ
äžæçãªä¿®æ£ã䜿çšïŒ
b ackgroundïŒurl ïŒ "... base64 ..."ïŒ
䜿çšããªãã§ãã ãã
ãŸããhtml2canvasã¯ãããç解ããŠããªãããã§ããããããã¹ãã©ã€ããã¯äœ¿çšããªãã§ãã ããã
URLã«äžäœãã£ã¬ã¯ããªã®èæ¯ãžã®çžå¯Ÿãã¹ãå«ãŸããŠããå Žåãèæ¯ç»åã«åé¡ããããŸãïŒurlïŒ "../ i / alerts-16x.png"ïŒ
次ã®æ¹æ³ã§pngãåé 眮ãããšæ©èœããŸãïŒurlïŒ "i / alerts-16x.png"ïŒ
èæ¯ç»åãã¬ã³ããªã³ã°ã§ãããã«ããŒãŸãã¯èæ¯ãµã€ãºãå«ãŸããŠããããã ã£ãã®ã§ã0.4.1ããŒãžã§ã³ã®350è¡ç®ã次ã®ããã«å€æŽããŸããã
topPos = isNaNïŒparseIntïŒbgposition [1]ã10ïŒïŒïŒ topPosïŒparseIntïŒbgposition [1]ã10ïŒ;
ãããŠããã¯åäœããŸãïŒ
ããŒãžã§ã³0.4.1ã®Im
èæ¯ã«ãåé¡ããããŸãã
fperichãææ¡ããããã«ã©ã€ã350ãå€æŽããŸãããã圹ã«ç«ã¡ãŸããã§ããã
ãŸããhernanãæšå¥šããbase64ã®èæ¯ç»åãè©ŠããŠã¿ãŸããã
ç§ãå€æããããšããŠããURLã¯ããã§ã
http://prompter.rareapps.org/prompt/prompt-save3.php?p=123
ããã§ãŠã§ãããŒãžã¬ã³ãã©ãŒã䜿çšãããšãããã¯ã°ã©ãŠã³ãã§å€æãããŸã
http://html2canvas.hertzen.com/screenshots.html
ããããç§èªèº«ã®ããŒãžã«ã¯èæ¯ããããŸããã ãã¡ãã®ãµã³ãã«ãã芧ãã ãã
http://prompter.rareapps.org/prompt/prompt-save3.php?p=123
ç§ã䜿çšããŠããã³ãŒãã¯ããã§ã
<script type="text/javascript">
$(window).load(function() {
html2canvas(document.body, {
onrendered: function(canvas) {
window.location.href = canvas.toDataURL('image/jpeg');
},
allowTaint: true,
taintTest: false
});
});
</script>
åºæ¬çã«ãããŒãžãèªã¿èŸŒãã§ç»åã«å€æããŸãã
ç§ã®ã³ãŒãã«äœãåé¡ããããŸããïŒ
ããããšã
fperichuããã¯ãã³!! ããããšã
第äºã«ãfperichãããªãã¯ä»ç§ã®å¥œããªäººã§ãïŒ
ããããšãfperichïŒDããã¯ããŸããããŸãã
@shauchenka @niklasvhãã®åé¡ã¯è§£æ±ºããããšæããŸããïŒ ãã®åé¡ã解決ã§ããŸãã/解決ããå¿ èŠããããŸããïŒ
0.4.1ïŒãªãªãŒã¹ãšéçºè ã®ææ°ã®äž¡æ¹ïŒã䜿çšãããšãå°ãªããšãChrome for Windowsã§ã¯ãåèŠçŽ ã®èæ¯ç»åïŒåã¯ã¹ãã©ã€ãïŒããã£ã³ãã¹ã«è¡šç€ºãããŸããã ãã ããFirefox forWindowsã¯æ£åžžã«åäœããŠããŸãã Chrome for Macã§ã¯ãèæ¯ç»åã®ã¹ãã³ãé»ãåè§ã«ãªããŸãã fperich fixãè©ŠããŸããããããŸããããŸããã§ããã èæ¯ç»åã¯åããªãªãžã³ã«ããããã¹ãŠã®ãã¡ã€ã«ã¯ãµãŒããŒäžã®åããã£ã¬ã¯ããªã«ãããŸãã
@ 4gstudiosåé¡ãå®èšŒããããã«ãç°¡ç¥åãããäŸãjsfiddleïŒãŸãã¯äžè¬ã«ã¢ã¯ã»ã¹å¯èœãªãªã³ã¯ïŒã«é 眮ã§ããŸããïŒ
@usmonster確ãã«ã ç»åãå€éšã«ããããªãã£ãã®ã§jsfiddleã䜿çšããªãã£ãã®ã§ãã¯ãã¹ãªãªãžã³ã®åé¡ãé€å€ã§ããŸãã
ä»äœãæšæž¬ããŸãã ãããæºåããŠãããšãã«ãåé¡ã¯ã¹ãã©ã€ãã«äœ¿çšãããpngã«ããããã ãšæ°ã¥ããŸããã æåã¯ãã¡ã€ã«ãµã€ãºãããããªããšæã£ãŠããŸããããå®éã«ã¯pngã®ãµã€ãºã«åé¡ãããããã§ãã
ããè€éãªpngã¯æ¯èŒçå°ããªãµã€ãºã§åé¡ã瀺ããŠããããã«èŠãããããpngã«å«ãŸããæ å ±ã®éãšé¢ä¿ãããå¯èœæ§ããããŸãã tinypng.comãä»ããpngã®æé©åãå°ãããã£ãã®ã§ãå¿ ããããã¡ã€ã«ãµã€ãºãšã¯é¢ä¿ããªããšæããŸãããã¡ã€ã«ãµã€ãºãå°ãã倧ããªç»åã§ã¯åé¡ãçºçããŸããããã¡ã€ã«ã倧ããå°ããç»åã§ã¯åé¡ãçºçããŸãããµã€ãºã¯ãããŸããã
ç§ã®äŸããã§ãã¯ããŠãã ããïŒ http ïŒ
éãããã¯ã¹ã¯ããŸãã¬ã³ããªã³ã°ãããŸãïŒbgç»åã¯100x7800ãã¯ã»ã«/ 374kbã§ãïŒ
èµ€ãããã¯ã¹ã¯æ£ããã¬ã³ããªã³ã°ãããŸããïŒbgç»åã¯100x25000ãã¯ã»ã«/ 254kbã§ãïŒ
-OS X ChromeïŒãã©ãã¯ããã¯ã¹ïŒã®å Žå
-OS X SafariïŒãããããããã¯ã¹ïŒ
-ãããŠããããWinChromeïŒæšæ¥èµ·ãã£ãŠãããPCã®ATMã®è¿ãã§ã¯ãªãã£ãïŒ
-OS XFirefoxã¯æ£åžžã«åäœããŠããããã§ãã
ããŸãããã°ãç§ãåé¡ã§ãããšä¿¡ããŠããããšãããŸã説æããããã解決ããããšãã§ããŸãã ç§ã®ãããžã§ã¯ãã§äœ¿çšãããã¹ãã©ã€ãã«ã¯800以äžã®ç°ãªãcssã«ãŒã«ããããæ¬åœã«å€æŽããå¿ èŠã¯ãããŸããïŒ
ç·šéïŒç§ã®äŸã§ã¯0.4.1ã䜿çšããŠããŸããã0.5.0rc1ãè©Šãããšãã«åãåé¡ãçºçããŠããŸã
ãã¹ãã§ããOSXã¯ãããŸããããWindowsäžã®Chrome 37ïŒVistaïŒããã³Linuxäžã®Chrome 38ããŒã¿çïŒDebian wheezyïŒã§ã¯æ£åžžã«åäœããããã§ãã ã©ã®ããŒãžã§ã³ã®Chromeã䜿çšããŠããŸããïŒ ã·ãŒã¯ã¬ããã¢ãŒãã§/ãã¹ãŠã®æ¡åŒµæ©èœããªãã«ããŠãã¹ããè©ŠããŸãããïŒ
@usmonster Chrome 36ïŒWin7ïŒã§è©ŠããåŸãChrome 37ïŒWin7ïŒã«æŽæ°ããŸãããããŸã åé¡ããããŸã
@ 4gstudiosãã®ã³ã°ããªã³ã«ãããšããã©ãŠã¶ã³ã³ãœãŒã«ã«äœã衚瀺ãããŸããïŒ
ãŸããåãåé¡ãçºçããŠããå Žåã§ããçŸåšãã¹ã¿ãŒãã©ã³ãã«ãããã®ã®ã¿ã䜿çšããããã«ãµã€ãã®äŸãæŽæ°ããŠãã ããã ãããã°ã«å€§ãã«åœ¹ç«ã¡ãŸãã
第äžã«ããã¹ãŠã®Chromeæ¡åŒµæ©èœãç¡å¹ã«ãªã£ãŠããå Žåã§ãããã®åé¡ãçºçãããã©ããã確èªããŠãã ããã ïŒãããããªããç»åã®ããŠã³ããŒããã¬ã³ããªã³ã°ãé ãããã®ã§ãã¿ã€ãã³ã°ã®åé¡ã§ã¯ãªãããšæããŸããïŒïŒ
@usmonster
1ïŒãã®ã³ã°ããªã³ã«ãªã£ãŠããŸã...ã
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ïŒã¬ã³ãã©ãŒïŒCanvasã¬ã³ãã©ãŒãå®äºããŸãã-ãã£ã³ãã¹objãè¿ããŸãhtml2canvas.jsïŒ21
2ïŒãã¹ã¿ãŒãã©ã³ãhtml2canvas.jsã«æŽæ°
3ïŒã¯ãããã¹ãŠç¡å¹ã«ããŠã¿ãŸããã ã¿ã€ãã³ã°ãªãããŠã³ããŒãæéã§ã¯ãªããšæããŸãããã¬ã³ããªã³ã°ã¯å¯èœæ§ãé«ãã§ãã
@ 4gstudiosãã¹ãããå¥ã®ãã·ã³ã¯ãããŸããïŒ ãŸããã©ã€ããªã³ã¯ã¯ãŸã 0.4.1ã䜿çšããŠããããã«èŠããŸãã
@usmonsterãããç§ã®æªããç§ã¯ãããä¿®æ£ããŸããã WinServer2012ãã·ã³ãChrome 37ã§ããã¹ããããšãããbgã®ä»£ããã«ãã©ãã¯ããã¯ã¹ã¬ã³ããªã³ã°ã§åãåé¡ãçºçããŸãã
ããŒããå©çšå¯èœãªã©ã¡ãã®ãã·ã³ã§ãåé¡ãåçŸããããšã¯ã§ããŸããããååã¯Windows7ãã·ã³ã§åçŸã§ããŸãã @ niklasvh ã @ brcontaineräœãã¢ã€ãã¢ã¯ãããŸããïŒ ãã©ãããã©ãŒã åºæã®GPUã¢ã¯ã»ã©ã¬ãŒã·ã§ã³ã«ããåæ/ã©ã¹ã¿ã©ã€ãºãšé¢ä¿ããããšæããŸããW7ãã·ã³ã«ã¢ã¯ã»ã¹ã§ãããã©ãããä»é±åŸåã«ãã¹ããè©Šã¿ãŸãããèå³ããããŸã...
@usmonsterChromeãæèŒããWindows7x64ã§çºçããŸããã ç§ã¯ãããã°ãããããšããŸãã
windows7x64ã§çºçããåé¡ãããã€ããããŸãããããŒãžã§ã³32ã§ã¯çºçããŸãããããã¯Chromeã®ãã°ã ãšæããŸãã
ããã¯å ã®ç»åã®ãµã€ãºã«é¢ä¿ããŠãããšç¢ºä¿¡ããŠããŸãã 倧ããªç»åã倧ããªãã£ã³ãã¹ãã¬ã³ããªã³ã°ãããšãããŸããŸãªçµæãåŸãããŸããç§ãç¥ãéãããããã®ãµããŒããæ€åºããããã®è³¢ãæ¹æ³ã¯å®éã«ã¯ãããŸããã
ãœãŒã¹ç»åã®ãµã€ãºãšã¯çŽæ¥é¢ä¿ãããŸããããããŸããŸãªçµæããã倧ããªç»åããã£ã³ãã¹ã®åé¡ã«ã€ããŠã®ã¢ã€ãã¢ãåŸãããŸãã
ãããããããŸããŸãªãã©ãŠã¶/ OS /ã¡ã¢ãªå¶éã®æ倧ç»åãµã€ãºãšãã£ã³ãã¹ãµã€ãºã®äž¡æ¹ã«ã€ããŠããã€ãã®ãã¹ããèšå®ããŠãå¶éãã©ãã«ããã®ããããšãã°ã¬ã³ããªã³ã°ãå°ããªãã£ã³ã¯ã«åå²ãããªã©ããŠå¶éãåé¿ã§ãããã©ãããå®éã«ç解ããå¿ èŠããããŸãã
@ 4gstudios @brcontaineråé¡ãåçŸã§ããããã€ã¹ã«ã¯ãã©ã®ãããã®ã¡ã¢ãªããããŸããïŒ
@niklasvh
ç§ã¯Windows32ãããã§ãã¹ãããŸãïŒå¯èœãªéãïŒããåé¡ã¯Windows64ãããã§ã®ã¿çºçãããšæããŸã
ç§ãæšæž¬ããããã«ãåé¡ã¯ãWindows x64ããšhttps://github.com/niklasvh/html2canvas/issues/206#issuecomment -17744888ã§ã®ã¿çºçã
@brcontainerãã®åé¡ã¯ãOS
32ãããã®Windows7ãã·ã³ã§ããã¹ãããŸãããããã¹ãŠæ£åžžã«åäœããŸãïŒãã°ã¯ãããŸããïŒã ããã¯ééããªã64ãããã·ã¹ãã ã®ã¿ã®åé¡ã®ããã«èŠããŸã-ãããã£ããã@ brcontainerïŒ ãã1ã€ã®æ³šæç¹ã¯ã64ãããã·ã¹ãã å°çšã®Chromeã®æ°ããããŒãžã§ã³ãããæè¿ãªãªãŒã¹ãããããšã§ãã
http://blog.chromium.org/2014/08/64-bits-of-awesome-64-bit-windows_26.html
https://www.google.com/chrome/browser/?platform=win64ïŒWindowsããŠã³ããŒããªã³ã¯ïŒ
http://blog.chromium.org/2014/08/mac-chrome-when-im-sixty-four-bits.htmlïŒMacã¯ãŸã ããŒã¿çã§ãïŒ
ãã®åé¡ãçºçããå Žåã¯ã32ãããããŒãžã§ã³ããŸã å®è¡ããŠããŸãããïŒ 64ãããçãå ¥æããã«ã¯æåã§ããŠã³ããŒãããå¿ èŠããããšæããŸãã ãããã®åé¡ã解決ããå¯èœæ§ããããŸãã
@usmonsterãŸãç§ã®Windows7ã¯64ãããã§ãã ãã®ãã°ã¯ãWin764ãããäžã®32ããããš64ãããã®äž¡æ¹ã®Chromeã«åœ±é¿ããŸãã äžéšã®OSXãã·ã³ã«ã圱é¿ãããšæããŸãã Chromeã®64ãããããŒãžã§ã³ãå ¥æããããã®ãªã³ã¯ãããããšããããã¯ç§ã®åé¡ã解決ããŸãããïŒcryïŒ
ããã¯Chromeã®ãã°ã®ããã«èãããŸããããWindows64ããããïŒãŸãã¯Mac OSXïŒãšã®éäºææ§ã§ã¯ãããŸããã
@brcontainer 4gstudios @ã§ãã£ãã«ãããããããç§ã¯ãïŒ/ 8 GBã®RAMã¯ããç§ã®64ãããã®Debianããã¯ã¹ã«..ããããLinuxã§ã¯ãªããå°ãªããšãã§ã¯ãªãïŒãããã¯ã64ãããã®WindowsïŒMacã®ã¯ããŒã ïŒWebKitã®ãã©ãŠã¶ã§ã¯åé¡ã®ããã«èŠããããšã«åæããŸã32ãããWindowsã§ãã°ã確èªã§ããŸããïŒ ãŸãããã®åé¡ã®åœ±é¿ãåãããã·ã³ã«ã¯ã©ã®ãããã®RAMããããŸãããïŒ
ãã®åé¡ãæ ¹æ¬çã«æžããããšãã§ããã°çŽ æŽããããšæããŸãã 2çªç®ã®PNGã«ã¯ãæåã®PNGãããã°ã©ããŒã·ã§ã³ãããããµã€ãºãã¯ããã«å€§ãããªã£ãŠããŸãã 圱é¿ãåãããã·ã³ããã¹ãããå Žåã¯ãç¹å®ã®åé¡ã®ããé åãŸãã¯ãµã€ãºãåå ã§ãããã©ãããããããŸã§ããäžè¯ãPNGãåãåããŸãã ïŒãããã@niklasvhã«ãé¢å¿ããã//wkbug.com/52391 ïŒ
@usmonster @niklasvh
AppleWebkitïŒããŒãžã§ã³538.1ïŒããã³ "Safari 5.1.7"ïŒããŒãžã§ã³534.57.2-ãã®ãã©ãŠã¶ãŒã¯ãã以äžã®æŽæ°ãååŸããŸããïŒã§ã¯ãWindows .then
ã¯å®è¡ãããŸããïŒèµ·å/ããªã¬ãŒã§ã¯ãããŸããïŒã
ãã®ããããWebkitãã®é害ãªã®ãããBlinkãïŒChromeã®Webkitã®ãšã³ãžã³ãã©ãŒã¯ïŒã®é害ãªã®ããããã«ã¯ãRAMãã®äžè¶³ã«ããé害ãªã®ãããã¹ãã§ããŸããã§ããã
@brcontainer @ 4gstudiosã«ãããšããã®ãã°ã¯OS Xã®SafariãšChromeã®äž¡æ¹ã§åçŸå¯èœã§ãã£ããããå°ãªããšãBlinkãšã³ãžã³ãšWebKitãšã³ãžã³ã®äž¡æ¹ã«å ±éã®ãã°ã§ãããšèããã®ãå®å šã ãšæããŸãã
@usmonster .then(...)
ãAppleWebkitïŒããŒãžã§ã³538.1ïŒã§å®è¡ãããªãããã«ãŠã£ã³ããŠããã¹ãã§ããŸããã§ãã
@usmonsteräŸãäœæããŠãããšãã«ã
@ usmonster ã @ brcontainer ã @ niklasvh ããã®åé¡ã«ã€ããŠãååããã ãããããšãããããŸã
@niklasvhonrenderedã¯éæšå¥šã§ãã ã§ã¯ã代ããã«äœã䜿çšã§ããŸããïŒ 0.5.0-alpha1ã䜿çšããŠããŸãã
ãŸããç»åã¯åããã¡ã€ã³ã«ãããŸãããèæ¯ç»åã¯ããŠã³ããŒããããŠããŸããã
html2canvasïŒ$ïŒ "ïŒforedownload table"ïŒã{
ãã®ã³ã°ïŒtrueã
onrenderedïŒfunctionïŒcïŒ{
var myImage = c.toDataURLïŒ "images / jpeg"ïŒ;
$ïŒ 'ïŒdownloadableImage'ïŒãpropïŒ 'href'ãmyImageïŒ;
}
}ïŒ;
ã©ããªå©ãã§ããããããã§ãã ããããšã
@ codegiant2https ïŒ//github.com/niklasvh/html2canvas#usage ã
Thanxfperichããã¯ç§ã®ããã«åãã!!
@fperich
ããªãã¯ç§ã倧ãã«å©ããŠãããŸãïŒã©ããããããšãïŒ
ç§ã¯ããªãã³ã°ãããäœã®èæ¯ç»åã®é¡ã§ãã
ïŒ bounds.height
ããã®å°ããªNodeContainer.prototype.parseBackgroundSize
-html2canvas 0.5.0-beta3ïŒmy
body {
background-image: url(./res/bg.jpeg);
background-repeat:no-repeat;
background-position:center center;
-o-background-size: cover;
-moz-background-size: cover;
-webkit-background-size: cover;
background-size: cover;
}
解決æžã¿ã®è¿œå
html, body {
margin: 0;
padding: 0;
height: 100%;
}
niklasvhãšãã¹ãŠã®è²¢ç®è ã«ããã®çŽ ââæŽãããã³ãŒããããããšãïŒ
ç§ãåãåé¡ãæ±ããŠããŸãããã£ã³ãã¹ã«è¡šç€ºãããŠããªãs3ç»åããããŒãããŠããŸãããã·ã¹ãã ã«ããŒã«ã«ã§ããŒãããŠããŸãããã©ã®ããã«è§£æ±ºã§ããŸããïŒ
ç§ãåãåé¡ãæ±ããŠããŸãã
èæ¯ç»åã®èªã¿èŸŒã¿ã«å€±æããŸããã ãšã©ãŒã¡ãã»ãŒãžã衚瀺ãããŸãããã¯ã°ã©ãŠã³ãã®èªã¿èŸŒã¿äžã«ãšã©ãŒãçºçããŸãã
ãã®åé¡ã解決ããã®ãæäŒã£ãŠãã ããã
ããããšãã
ããã«ã¡ã¯@gopiss ã
corseãªãã·ã§ã³ã䜿çšããŸãã
html2canvas(document.body, {
onrendered: function (canvas) {
.....
},
useCORS: true
});
@fxmontignyã
ããã§ããå¢çç·ç»åã®èªã¿èŸŒã¿ã®åé¡ã¯ååšããŸãã æŽæ°ãããJSFiddleãåç
§ããŠãã ããã
å¢çç·ã®ç»åãèªã¿èŸŒãŸãããé»è²ã®å¢çç·ã®ã¿ã衚瀺ãããŸãã
ç§ã¯åãåé¡ã«çŽé¢ããŠããŸãã 以äžã¯Chromeã³ã³ãœãŒã«ããã®ãã°ã§ã
html2canvasïŒããªããŒããéå§ãããŸãïŒèæ¯ç»åã®æ€çŽ¢
html2canvas.jsïŒ21 html2canvasïŒéå§ïŒç»åïŒ1/1ïŒå€±æïŒ0ïŒ
html2canvas.jsïŒ21 html2canvasïŒéå§ïŒç»åïŒ2/2ïŒå€±æïŒ0ïŒ
html2canvas.jsïŒ21 html2canvasïŒããªããŒãïŒç»åã®æ€çŽ¢
html2canvas.jsïŒ21 html2canvasïŒããªããŒãïŒå®äºã
html2canvas.jsïŒ21 html2canvasïŒéå§ïŒç»åïŒ2/2ïŒå€±æïŒ0ïŒ
html2canvas.jsïŒ21ç»åã®èªã¿èŸŒã¿ãå®äºããŸããïŒïŒ2ïŒå€±æïŒ0ïŒ
html2canvas.jsïŒ21 html2canvasïŒããã¯ã°ã©ãŠã³ãã®èªã¿èŸŒã¿ãšã©ãŒïŒ
html2canvas.jsïŒ21 html2canvasïŒã¬ã³ãã©ãŒïŒCanvasã¬ã³ãã©ãŒãå®äºããŸãã-canvasobjãè¿ããŸã
ããã¯ãŸã v1.0.0ã®åé¡ã§ããïŒ ãããããªãã jsfiddleã§äŸãå ±æããŠ
ãã®åé¡ã¯ãå ã®äœæè ããã®è©³çŽ°æ å ±ã®èŠæ±ã«å¯Ÿããå¿çããªãã£ããããèªåçã«ã¯ããŒãºãããŸããã çŸåšåé¡ã«ãªã£ãŠããæ å ±ã ãã§ã¯ãè¡åãèµ·ããã®ã«ååãªæ å ±ããããŸããã ããã«èª¿æ»ã§ããããã«ãå¿ èŠãªåçãããå Žåã¯ãé£çµ¡ãã ããã
ããã¯èª°ããå©ãããããããªãã®ã§ã³ã¡ã³ãããã ãã§ãã
ç§ã®åé¡ã¯ãããŒã«ã«ã§ã¯ãã¹ãŠãæ©èœããŠããããæ¬çªç°å¢ã§ã¯cssèæ¯ç»åã®ã¬ã³ããªã³ã°ã«å€±æããŠããããšã§ããã
çç±ã¯ãCloudFrontã䜿çšããŠããããšã§ããã€ãŸããJSãå¥ã®ãã¡ã€ã³ã§å®è¡ãããŠãããšãã«ãcssãã¡ã€ã«ã®URLãã¯ã©ãŠãããã³ããã¡ã€ã³ã®ã¢ã»ãããåç
§ããŠããŸããã
ãã ããhtml2canvasãã°ã¯ããããcorsã®åé¡ã§ããããšã瀺ããŠããŸããã§ããã
ãuseCORSãã¯ãããã·URLãäœããå¿
èŠã ãšæãã®ã§ãããèªäœã§ã¯æ©èœããªãããã§ãã
@jacobclarkeã¯ãhtml2canvasã䜿çšããŠããŒã«ã«S3ç»åã®ãã£ã³ãã¹äžã®èæ¯ç»åããã£ããã£ãããšãã«ãåãåé¡ããã£ããã£ããŠããŸãããæ¬çªç°å¢ã§ã¯èæ¯ç»åããã£ããã£ããŠããŸããã ç§ã®html2canvasããŒãžã§ã³ã¯v1.0.0ã§ã
æãåèã«ãªãã³ã¡ã³ã
èæ¯ç»åãã¬ã³ããªã³ã°ã§ãããã«ããŒãŸãã¯èæ¯ãµã€ãºãå«ãŸããŠããããã ã£ãã®ã§ã0.4.1ããŒãžã§ã³ã®350è¡ç®ã次ã®ããã«å€æŽããŸããã
topPos = isNaNïŒparseIntïŒbgposition [1]ã10ïŒïŒïŒ topPosïŒparseIntïŒbgposition [1]ã10ïŒ;
ãããŠããã¯åäœããŸãïŒ