Javascript Html2Canvas 调整大小
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11397785/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Html2Canvas Resize
提问by Chris
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).
我正在使用 html2canvas 来获取网页的屏幕截图并将其呈现为缩略图（好吧，400x300，不完全是缩略图）。
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.
如何将图像大小设置为 400x300？在萤火虫中，我将属性定位为：<canvas style="width: 973px; height: 2184px;" width="973" height="2184"></canvas>。但是，我无法在我的代码（如下）或 html2canvas.js 中找出硬编码 400x300 参数的位置。
screenshot.html:
截图.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>
采纳答案by Mikko Ohtamaa
You can create additional new <canvas>with thumbnail dimensions and use drawImage() to scale it down on this new <canvas>.
您可以<canvas>使用缩略图尺寸创建其他新的，并使用 drawImage() 在这个新的<canvas>.
drawImage() can read <canvas>as imagesource and you may set target width and height.
drawImage() 可以<canvas>作为image源读取，您可以设置目标宽度和高度。
https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Canvas_tutorial/Using_images
https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Canvas_tutorial/Using_images
回答by select
Based on Mikkos hint the following woked for me
根据 Mikkos 提示，以下内容为我唤醒
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);
},
});
回答by Endre Simo
Well you can get a reference from the canvas context by using the getContext('2d')method, then by assigning the returned context to a variable (for ex. ctx), you can be able to use the context scalemethod to scale the canvas context to the desired size. As an addition you can define the canvas size using the style attribute and setting the size of style widthand heightproperty by dividing the actual image size with the desired thumbnail size. In the last step you put the resulting number in the ctx.scale(width, height);method.
好吧，您可以使用getContext('2d')方法从画布上下文中获取引用，然后通过将返回的上下文分配给变量（例如ctx），您可以使用上下文scale方法将画布上下文缩放到所需的大小。此外，您可以使用 style 属性定义画布大小，width并height通过将实际图像大小除以所需的缩略图大小来设置样式和属性的大小。在最后一步中，您将结果数字放入ctx.scale(width, height);方法中。
回答by musikele
I have used a similar approach for your problem, partly based on other answers :) Since resizing images is easier if they are actual 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);
canvasis the output of the html2canvas function; then I create an imgsetting its source with the img data (the base64 encoding of the canvas). the rest is standard good-old-javascript: set the img width, append to the div element ...
canvas是 html2canvas 函数的输出；然后我img使用 img 数据（画布的 base64 编码）创建一个设置其源。其余的是标准的good-old-javascript：设置img宽度，附加到div元素......
回答by chavy
found this way unexpactly for me(later i found why its do so). Just add few attributes after position attributes, like this doc.addImage(img, 'JPEG', 20, 20, 200, 250), and two last number gives you the opportunity to resize img.
对我来说意外地发现了这种方式（后来我发现了为什么这样做）。只需在位置属性后添加一些属性，就像这样doc.addImage(img, 'JPEG', 20, 20, 200, 250)，最后两个数字让您有机会调整 img 的大小。
