Html2Canvas調整大小

我正在使用html2canvas努力獲取網頁的屏幕截圖並將其呈現爲縮略圖（以及400x300，不完全是縮略圖）。Html2Canvas調整大小

根據Screenshot console code，除了縮略圖部分外，一切都很好。

如何將圖像大小設置爲400x300？在螢火蟲我找到屬性爲：<canvas style="width: 973px; height: 2184px;" width="973" height="2184"></canvas>。但是，我無法弄清楚我的代碼（下面）或html2canvas.js在哪裏硬編碼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>

來源

2012-07-09 Chris

您可以用縮略圖尺寸創造更多的新<canvas>和使用的drawImage（）規模在這張新<canvas>。

drawImage（）可以讀取<canvas>作爲image源，您可以設置目標寬度和高度。

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

來源

2012-07-09 18:26:04

那麼你可以通過使用getContext('2d')方法，然後通過把返回的情況下給一個變量獲得從畫布上下文的引用（前。ctx），你可以可以使用上下文scale方法將畫布上下文縮放到所需的大小。作爲補充，您可以使用樣式屬性定義畫布大小，並通過將實際圖像大小除以所需的縮略圖大小來設置樣式width和height屬性的大小。在最後一步中，將結果編號置於ctx.scale(width, height);方法中。

來源

2012-07-09 18:45:47

基於Mikkos提示以下woked我

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

來源

2013-04-30 16:27:38 select

我已經使用了類似的方法對你的問題，部分基於其他答案:) 由於調整圖像大小是比較容易，如果他們是實際圖像，在這裏是我的代碼：

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

canvas是html2canvas函數的輸出;然後我創建一個img用img數據（畫布的base64編碼）設置它的源代碼。剩下的就是標準古老的javascript：設置img的寬度，追加到div元素...

來源

2015-11-12 10:49:41 musikele

對我而言，這種方式沒有任何意義（後來我發現它爲什麼這樣做）。只需在位置屬性後添加一些屬性，如doc.addImage(img, 'JPEG', 20, 20, 200, 250)，最後兩個數字可讓您有機會調整img大小。

來源

2017-11-08 11:17:59

Html2Canvas調整大小

回答

相關問題