Html2Canvas调整大小 [英] Html2Canvas Resize
本文介绍了Html2Canvas调整大小的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我使用html2canvas来获取网页的屏幕截图并将其呈现为缩略图（当然，400x300，不完全是缩略图）。
基于在截图控制台代码上，除缩略图部分外，一切都很好。
如何将图片大小设置为400x300？在firebug中，我找到了这个属性：< canvas style =width：973px; height：2184px; width =973height =2184>< / canvas> 。但是，我无法在我的代码中找到（下面）或在html2canvas.js中硬编码400x300参数。
$ b screenshot.html：
< html>
< head>
< title>屏幕截图< / 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 / javascriptsrc =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（函数（）{message.fadeOut（函数（）{message.remove（）}）}，一个|| 2000）; $（消息）卸下摆臂（）;消息= $（< div />\").html(b).css({margin:0,padding:10,background:\"#000\",opacity:0.7,position:\"fixed\",top:10，右：10，fontFamily中： 宋体，颜色 ＃FFF，fontSize的：12，borderRadius：12，宽度： 自动，高度： 自动，textAlign设置： 中心，textDecoration： 无}） （）函数（c）{c.preventDefault（）; $（＃url）.hide（）。fadeIn（）。appendTo（body）} ）.val（this.href）; $（button）。click（）}）; var a，b; $（'input [type =button]'）。click（function（）{$（a .contentWindow）.unbind（ 加载）; $（一）.contents（）找到（ 身体）html2canvas（{canvasHeight：b.body.scrollHeight，canvasWidth：b.body.scrollWidth，日志记录：真正}。 ）}）; $（ ＃getscreenshot）点击（函数（d）{d.pr （）; $（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（{数据：{XHR2：假，网址：f.href}，网址：proxyUrl，数据类型： JSONP，成功：函数（E）{A =使用document.createElement（ IFRAME）; $（a）中。 CSS（{能见度： 隐藏}）宽度（$（窗口）.WIDTH（）/ 2）.height（$（窗口）.height（）/ 2）; $（ ＃含量）附加（一个。 ）; b = a.contentWindow.document; b.open（）; $（a.contentWindow）.load（function（）{var g = $（a）.contents（）。find（body），h = {onrendered：。函数（J）{$（ ＃含量）空（）追加（j）的; $（ ＃getscreenshot）丙（ 禁用，假）; $（ 碱基）ATTR （的 href， ）}，allowTaint：真，taintTest：假，flashcanvas： SRC / flashcanvas.min.js}，I = html2canvas（G，H）}）; $（ 碱基）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 （/ \< SCRI PT / GI， <！ - <脚本）; E = e.replace（/ \< \ / script\> / GI，< \ /脚本> - > ）} b.write（E）; b.close（）}}）}）}）;
< / script>
< form class =well form-search>
< label for = url>网站网址：< / label>
< input type = url id = url value =http://www.yahoo.comclass =input-medium search-query/>
< button class = btn id = getscreenshot>获取屏幕截图！< / button>
< / form>
< div id = content>< / div>
< / body>
< / html>
解决方案
您可以创建更多新的 < canvas> 缩略图尺寸并使用drawImage（）将其缩小到新的< canvas> 。
drawImage（）可以读取< canvas> 作为图片设置目标宽度和高度。
https://developer.mozilla.org/zh-CN/docs/Web/Guide/HTML/Canvas_tutorial/Using_images
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>
解决方案
You can create additional new <canvas> with thumbnail dimensions and use drawImage() to scale it down on this new <canvas>.
drawImage() can read <canvas> as image source and you may set target width and height.
https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Canvas_tutorial/Using_images
这篇关于Html2Canvas调整大小的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
