Html2Canvas 调整大小

2023-11-21

我正在使用 html2canvas 来获取网页的屏幕截图并将其呈现为缩略图(好吧,400x300,不完全是缩略图)。

基于截图控制台代码,除了缩略图部分之外,一切都运行良好。

如何将图像尺寸设置为 400x300?在 firebug 中,我将该属性定位为:<canvas style="width: 973px; height: 2184px;" width="973" height="2184"></canvas>。但是,我无法在我的代码(如下)或 html2canvas.js 中弄清楚在哪里对 400x300 参数进行硬编码。

截图.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>

根据 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);
              },
            });
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

Html2Canvas 调整大小 的相关文章

随机推荐

  • PHP 搜索字符串(带通配符)

    有没有办法在字符串中添加通配符 我之所以问这个问题 是因为目前我有一个函数可以在两个子字符串之间搜索子字符串 即抓取 我的狗有跳蚤 这句话中 我的 和 有跳蚤 之间的内容 从而得到 狗 function get string between
  • 没有周末的日差

    我想计算用户输入的总天数差异 例如当用户输入 start date 2012 09 06 and end date 2012 09 11 现在我正在使用这段代码来找出差异 count abs strtotime start date str
  • 如何在 C# 项目中使用 Windows 命令行安装 Nuget 包?

    我已经下载了 NuGet 版本 5 1 0 并尝试使用 cmd 安装其中一个包 log4net 它失败了 下面是错误 Microsoft Windows 版本 10 0 19042 1348 c Microsoft Corporation
  • Glassfish 中外部库的放置位置

    我使用 Netbeans 7 创建了一个 JSF2 项目 并成功将其部署在 Glassfish 3 1 上 不过 ear 文件已经变得相当大 6 5mb 其中大部分由外部 jar 文件 如 apache commons solrj prim
  • npm install openssl 在 Windows 10 上失败

    我在 Win10 的 Node js 命令窗口中运行以下命令 它失败了 有人知道如何解决它吗 我正在运行 Node js v7 3 0 C Users haozhang gt npm install openssl C Users haoz
  • WordPress,pre_get_posts 中有多个meta_key

    是否可以添加两个meta key s in pre get posts 我当前的查询 query gt set s query gt set meta key cat adresse stadtteil query gt set meta
  • 类别方法可以被重写吗? IOS

    我正在尝试计划如何向某些对象的所有实例添加一些方法 我认为向父对象 UIViewController 添加一个类别可以满足我想要做的事情 但是我可以重写以这种方式添加的方法吗 大多数情况下 子类将使用默认方法 但我确实知道我需要至少重写该方
  • 在 Android 操作系统中使用 SSLSocket 的 TLS 连接速度很慢

    我正在开发一个 Android 应用程序 它使用 SSLSocket 连接到服务器 这是我正在使用的代码 Connect if socket null socket isClosed socket isConnected if socket
  • “var self = this”方法背后的基本原理是什么? [复制]

    这个问题在这里已经有答案了 可能的重复 JS var self this 当查看用 JavaScript 编写的任意代码 例如在 GitHub 上 时 许多开发人员使用var self this然后使用self代替this来引用当前对象 这
  • 为什么 Hash#select 和 Hash#reject 将键传递给一元块?

    我的理解是Hash select and Hash reject每个都传递一个键及其值的数组 key value 作为每次迭代的单个块参数 您可以使用隐式破坏性赋值直接在块内单独选取它们 a 1 b 2 select k v k a gt
  • 如何为 IXmlSerialized 类型添加命名空间前缀

    我有以下类定义 XmlRoot ElementName person Namespace MyNamespace public class Person IXmlSerializable public string FirstName ge
  • 包安装错误 - 实体框架

    当我尝试创建 ADO NET 实体数据模型时发生错误 错误说 预安装的软件包引用了缺失的注册表 价值 找不到具有名称的注册表项 EntityFrameworkVisualStudio14Tools 下 软件 NuGet 存储库 我使用的是
  • 在后台启动 jenkins

    我正在使用 war 文件在我的服务器上运行 jenkins 他们说用 java jar jenkins war 来源 https wiki jenkins ci org display JENKINS Starting and Access
  • 什么 Maven 工件包含 javax.ws.rs.Path?

    我正在研究 Bill Burke 编写的 Restful Java with JAX RS 中的示例 我正在使用 intellij 并创建了一个 Maven 项目来制作 Hello World Web 服务 我理解 JAX RS 是一个规范
  • 如何对 Laravel 5.7“电子邮件验证”电子邮件发送进行排队

    Laravel 5 7 包含的 电子邮件验证 功能运行良好 但异步电子邮件发送 在用户注册或重新发送链接页面期间 并不理想 有没有办法通过队列发送电子邮件验证电子邮件 而无需在 Laravel 5 7 中重写整个电子邮件验证 没有内置的方法
  • 详细披露按下后注释详细信息?

    我有一个 MKMapView 注释对象 它有一个正确的标注附件详细信息披露按钮 当按下按钮时 我使用 addTarget action forControlEvent 调用一个选择器方法 该方法创建一个详细视图控制器并将其推送到视图堆栈上
  • 如何在 Visual C++ 中调试外部库 (OpenCV)?

    我正在用VC 2008开发一个项目 该项目使用 OpenCV 库 但我想这适用于任何其他库 我正在使用调试配置 链接器属性包括库 lib 的调试版本作为附加依赖项 在 工具 选项 下的 VC 目录中 我设置了包含目录 lib 目录以及库的源
  • hadoop - namenode上的连接被拒绝

    我在网上和stackoverflow上搜索了很长时间 但没有用 我已经在 2 节点集群设置中安装了 hadoop yarn 2 2 0 但出了问题 当我在主节点上使用 start dfs sh 和 start yarn sh 启动 hado
  • 使用新的 csproj 在 PDB 中嵌入 C# 源代码

    最近发布的 NET 工具似乎支持在 PDB 中嵌入 C 这应该会改善进入第三方等的体验 csc 我可以清楚地看到 embed 选项 将所有源文件嵌入到 PDB 中 但是 似乎没有任何方法可以在 csproj 中指定这一点 此外 似乎没有任何
  • Html2Canvas 调整大小

    我正在使用 html2canvas 来获取网页的屏幕截图并将其呈现为缩略图 好吧 400x300 不完全是缩略图 基于截图控制台代码 除了缩略图部分之外 一切都运行良好 如何将图像尺寸设置为 400x300 在 firebug 中 我将该属