Html2Canvas Redimensionner

Je suis en utilisant html2canvas dans un effort pour obtenir une capture d'écran d'une page web et de le rendre comme une vignette (bien, 400x300, pas exactement une vignette).

Basé sur la Capture d'écran de la console de code, tout fonctionne très bien à l'exception de la vignette de la partie.

Comment puis-je définir la taille de l'image à 400x300? Dans firebug, j'localiser l'attribut: <canvas style="width: 973px; height: 2184px;" width="973" height="2184"></canvas>. Cependant, je ne figure dans mon code(ci-dessous) ou dans le html2canvas.js où pour coder en dur le 400x300 paramètres.

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>

OriginalL'auteur Chris | 2012-07-09

3

Vous pouvez créer de nouvelles <canvas> avec des vignettes de dimensions et de l'utilisation drawImage() à l'échelle vers le bas sur cette nouvelle <canvas>.

drawImage() peut lire <canvas> comme image source et vous pouvez définir la cible de largeur et de hauteur.

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

OriginalL'auteur Mikko Ohtamaa

Basé sur Mikkos soupçon suivantes woked pour moi

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);
},
});

Bonjour, ton code m'a tellement proche de la réussite, manque juste quelque chose avec le ctx j'ai une image avec des inconnus largeur & de la hauteur. et je veux qu'il fit (en gardant son aspect ratio) permet de dire 800x500 px Mais lorsque l'image est widther j'ai eu un undesire recadrée 🙁 Aucune idée de comment l'installation d'un ajustement ? merci d'avance

OriginalL'auteur select

0

Eh bien, vous pouvez obtenir une référence dans le contexte de canevas à l'aide de la getContext('2d') méthode, puis en attribuant le retour de contexte à une variable (par ex. ctx), vous pouvez être en mesure d'utiliser le contexte scale méthode à l'échelle de la toile contexte à la taille souhaitée. Comme une outre, vous pouvez définir la taille du canevas à l'aide de l'attribut style et le réglage de la taille de style width et height propriété en divisant la taille réelle de l'image à la bonne taille des vignettes. Dans la dernière étape, vous mettez le nombre obtenu dans la ctx.scale(width, height); méthode.

OriginalL'auteur Simo Endre
0

J'ai utilisé une approche similaire pour votre problème, basé en partie sur d'autres réponses 🙂
Depuis le redimensionnement des images est plus facile si elles sont réelles images, voici mon code:
```
var img = new Image();
img.src = canvas.toDataURL("image/png");
img.width = 500;
document.getElementsByClassName('modal-body')[0].appendChild(img);
```
canvasest la sortie de la html2canvas fonction; puis-je créer un img réglage de sa source à l'img de données (encodage base64 de la toile). le reste est standard bon vieux javascript: définir le img width, ajouter à l'élément div ...

OriginalL'auteur musikele
0

trouvé cette façon unexpactly pour moi(plus tard, j'ai trouvé pourquoi sa le faire). Juste ajouter quelques attributs après la position des attributs, comme ce doc.addImage(img, 'JPEG', 20, 20, 200, 250), et les deux dernières certain nombre vous donne la possibilité de redimensionner img.

OriginalL'auteur chavy

Vous devez vous connecter pour publier un commentaire.