132
rated 0 times
[
138]
[
6]
/ answers: 1 / hits: 47723
/ 12 Years ago, mon, july 9, 2012, 12:00:00
I am using html2canvas in an effort to get a screenshot of a webpage and render it as a thumbnail (well, 400x300, not exactly a thumbnail).
Based on the Screenshot console code, everything works great with the exception of the thumbnail part.
How can I set the image size to 400x300? In firebug I locate the attribute as: <canvas style=width: 973px; height: 2184px; width=973 height=2184></canvas>. However, I cannot figure out in my code(below) or in the html2canvas.js where to hardcode the 400x300 parameters.
screenshot.html:
<html>
<head>
<title>Screenshot</title>
<!--[if lt IE 9]>
<script src=//html5shim.googlecode.com/svn/trunk/html5.js>
</script>
<![endif]-->
</head>
<body>
<div class=container> </div>
<script src=//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js></script>
<script type=text/javascript src=js/html2canvas.js></script>
<script type=text/javascript>
var date=new Date();
var message,timeoutTimer,timer;
var proxyUrl=http://html2canvas.appspot.com;
function addRow(a,c,d){var b=$(<tr />).appendTo($(a));b.append($(<td />).css(font-weight,bold).text(c)).append($(<td />).text(d))}function throwMessage(b,a){window.clearTimeout(timeoutTimer);timeoutTimer=window.setTimeout(function(){message.fadeOut(function(){message.remove()})},a||2000);$(message).remove();message=$(<div />).html(b).css({margin:0,padding:10,background:#000,opacity:0.7,position:fixed,top:10,right:10,fontFamily:Tahoma,color:#fff,fontSize:12,borderRadius:12,width:auto,height:auto,textAlign:center,textDecoration:none}).hide().fadeIn().appendTo(body)}$(function(){$(#recommended a).click(function(c){c.preventDefault();$(#url).val(this.href);$(button).click()});var a,b;$('input[type=button]').click(function(){$(a.contentWindow).unbind(load);$(a).contents().find(body).html2canvas({canvasHeight:b.body.scrollHeight,canvasWidth:b.body.scrollWidth,logging:true})});$(#getscreenshot).click(function(d){d.preventDefault();$(this).prop(disabled,true);var c=$(#url).val();$(#content).append($(<img />).attr(src,loading.gif).css(margin-top,40));var f=document.createElement(a);f.href=c;$.ajax({data:{xhr2:false,url:f.href},url:proxyUrl,dataType:jsonp,success:function(e){a=document.createElement(iframe);$(a).css({visibility:hidden}).width($(window).width()/2).height($(window).height()/2);$(#content).append(a);b=a.contentWindow.document;b.open();$(a.contentWindow).load(function(){var g=$(a).contents().find(body),h={onrendered:function(j){$(#content).empty().append(j);$(#getscreenshot).prop(disabled,false);$(base).attr(href,)},allowTaint:true,taintTest:false,flashcanvas:src/flashcanvas.min.js},i=html2canvas(g,h)});$(base).attr(href,f.protocol+//+f.hostname+/+f.pathname);e=e.replace(<head>,<head><base href='+f.protocol+//+f.hostname+/+f.pathname+' />);if($(#disablejs).prop(checked)){e=e.replace(/<script/gi,<!--<script);e=e.replace(/</script>/gi,</script>-->)}b.write(e);b.close()}})})});
</script>
<form class=well form-search>
<label for=url>Website URL:</label>
<input type=url id=url value=http://www.yahoo.com class=input-medium search-query/>
<button class=btn id=getscreenshot>Get screenshot!</button>
</form>
<div id=content></div>
</body>
</html>
More From » html
