Geek Answers Handbook

Html2Canvas Resize

I use html2canvas to get a screenshot of a web page and make it look like a thumbnail (well, 400x300, not exactly a thumbnail).

Based on the screenshot of the console code , everything works fine, with the exception of some thumbnails.

How to set image size to 400x300? In firebug, I define the attribute as: <canvas style="width: 973px; height: 2184px;" width="973" height="2184"></canvas> <canvas style="width: 973px; height: 2184px;" width="973" height="2184"></canvas> . However, I can not understand in my code (below) or in html2canvas.js, where for hard-coding parameters 400x300.

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>
+4
source share
5 answers

You can create additional new <canvas> thumbnail sizes and use drawImage () to zoom out on this new <canvas> .

drawImage () can read <canvas> as an image source, and you can set the width and height of the target.

https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Canvas_tutorial/Using_images

+2
source

Based on Mikkos, hint to me the following coquetry

 window.html2canvas([$('body')[0]], { onrendered: function(canvas) { var extra_canvas = document.createElement("canvas"); extra_canvas.setAttribute('width',70); extra_canvas.setAttribute('height',70); var ctx = extra_canvas.getContext('2d'); ctx.drawImage(canvas,0,0,canvas.width, canvas.height,0,0,70,70); var dataURL = extra_canvas.toDataURL(); var img = $(document.createElement('img')); img.attr('src', dataURL); // insert the thumbnail at the top of the page $('body').prepend(img); }, });
+14
source

Well, you can get the link from the canvas context using the getContext('2d') method, and then assigning the returned context to a variable (e.g. ctx ), you can use the scale context method to scale the canvas context to the desired size. As an addition, you can determine the size of the canvas using the style attribute and set the size of the style width and height , dividing the actual image size by the desired sketch size. In the last step, you put the resulting number in the ctx.scale(width, height); method ctx.scale(width, height); .

0
source

I used a similar approach for your problem, partly based on other answers :) Since resizing images is easier if they are real images, here is my code:

 var img = new Image(); img.src = canvas.toDataURL("image/png"); img.width = 500; document.getElementsByClassName('modal-body')[0].appendChild(img);

canvas is the output of the html2canvas function; then I create img by setting its source with img data (canvas base64 encoding). the rest is standard good-javascript: set the img width, add a div element ...

0
source

found this path imperfect for me (later I found why this is so). Just add a few attributes after the position attributes, for example, doc.addImage(img, 'JPEG', 20, 20, 200, 250) , and the last two numbers give you the option to resize img.

0
source

More articles:


All Articles