标签: html2canvas
IE中未定义"承诺"
我'Promise' is undefined在IE中收到错误.为什么这样,我怎么解决这个问题？
推荐指数
解决办法
查看次数
使用html2canvas将div捕获到图像中
我正在尝试使用div将div捕获到图像中 html2canvas
我在这里读过类似的问题
我试过了代码
canvasRecord = $('#div').html2canvas();
dataURL = canvasRecord.toDataURL("image/png");
并且canvasRecord将undefined在.html2canvas()被召唤之后
还有这个
$('#div').html2canvas({
onrendered: function (canvas) {
var img = canvas.toDataURL()
window.open(img);
}
});
浏览器给出一些(确切地说是48个)类似的错误,例如:
GET http://html2canvas.appspot.com/?url=https%3A%2F%2Fmts1.googleapis.com%2Fvt%…%26z%3D12%26s%3DGalileo%26style%3Dapi%257Csmartmaps&callback=html2canvas_1 404 (Not Found)
顺便说一句,我正在使用v0.34,我已经添加了参考文件html2canvas.min.js和jquery.plugin.html2canvas.js
如何转换div为canvas以捕获图像.
编辑于2013年3月26日
我发现乔尔的榜样有效.
但遗憾的是,当谷歌地图嵌入我的应用程序时,会出现错误.
<html>
<head>
<style type="text/css">
div#testdiv
{
height:200px;
width:200px;
background:#222;
}
div#map_canvas
{
height: 500px;
width: 800px;
position: absolute !important;
left: 500px;
top: 0;
}
</style>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?v=3&sensor=false"></script> …推荐指数
解决办法
查看次数
HTML2Canvas不呈现完整的div,只显示屏幕上可见的内容？
我正在尝试使用HTML2Canvas来呈现div的内容.这是代码:
var htmlSource = $('#potenzial-page')[0];
$('#btn').on("click", function() {
html2canvas(htmlSource).then(function(canvas) {
var img = canvas.toDataURL();
window.open(img);
});
});
我正在使用v5 beta 3.
此代码运行时,它仅呈现屏幕上可见的内容.该#potenzial-pageDIV实际上就是整个页面,减去页眉和页脚.通过滚动可以看到此div中的所有内容(有一些隐藏元素,但我不希望隐藏元素在图像中可见.)
我找不到什么是错的,或者为什么它不能保存整个div.我还应该注意到,图像看起来和div一样高,但只是部分可见.
举一个我的意思的例子,这是一个比较:
左边是HTML2Canvas应该如何呈现div.右边显示了它在运行上面的代码时如何呈现.正确的图像是我的浏览器屏幕中可见的图像.
我确实尝试添加height选项,但它没有任何区别.
UPDATE
如果我滚动到页面的最顶部然后运行脚本它将呈现整个div应该.
如何渲染div而不必滚动到顶部？
推荐指数
解决办法
查看次数
html2canvas不适用于Google Maps Pan
我正在使用html2canvas将我的在线地图保存为图像(请参阅另存为图像链接).我在Firefox,Chrome和Opera中尝试过它.
如果您不更改默认地图,它往往会更频繁地工作.如果缩放然后平移地图,则不太可能工作.地图将平移,但html2canvas将使用旧的中心点和地图边界.并且html2canvas将无法加载新地图边界的地图图块.
地图平移正确,但html2canvas使用旧的中心点和地图边界.为什么是这样？
为了支持从不同的域获取图像,我有以下设置:
useCors: true;
我尝试了以下解决方案
- 手动更改地图类型.有时这会修复它.
- 触发浏览器调整大小事件 - 没用.
- 使用setTimeout()等待2000毫秒以确保加载切片 - 没用
- 使用代理(html2canvas_proxy_php.php) - 没用
- 使用谷歌地图空闲事件等待地图在保存前闲置 - 没用
推荐指数
解决办法
查看次数
如何使用HTML2canvas将img保存到用户的本地计算机
我正在使用HTML2canvas .4.1渲染屏幕截图,并希望将图像保存到用户的本地计算机.如何实现这一目标？请注意我是初学者,因此实际代码对我最有帮助.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script type="text/javascript" src="html2canvas.js"></script>
<button id="save_image_locally">download img</button>
<div id="imagesave">
<img id='local_image' src='img1.jpg'>
</div>
<script>
$('#save_image_locally').click(function(){
html2canvas($('#imagesave'),
{
onrendered: function (canvas) {
var img = canvas.toDataURL("image/png");
alert('This will currently open image in a new window called "data:". Instead I want to save to users local computer. Ideally as a jpg instead of png.');
window.open(img);
}
});
});
</script>
推荐指数
解决办法
查看次数
屏幕外的html2canvas
在使用html2canvas时,我有一个stackDOM对象(相对定位的div包含各种东西),我希望为它创建单独的缩略图.所以,如果有十个div,我将创建十个缩略图.
这些对象中的一些将在屏幕外 - 这些div中的每一个都在一个称为"mainDiv"的单个包含div中.我遍历mainDiv中的div并分别在每个div上执行html2canvas.
对于那些屏幕上的人来说,这很好.屏幕外的那些不会 - 它们会变回空白.我创建了一个将对象滚动到顶部的解决方法,mainDiv但这是一个kludge,在视觉上没有吸引力.
是否可以指定不可见的DOM对象？理想情况下,我希望能够指定一个包含div并html2canvas忽略父可见性,因此我可以屏幕捕获隐藏的对象,但除此之外,我希望能够屏幕捕获仅在屏幕上滚动的对象.
有什么想法,想法？谢谢!
----这是一些示例代码.基本上,如果你在div中有一堆div,则迭代它们.我实际上这样做,recursively以便一次只处理一个,回调调用递归函数,所以它看起来像这样:
function recurser(anIndex, callback) {
if (anIndex == -1) {
callback();
return;
}
$(myDivs[anIndex]).html2canvas({
onrendered : function(canvas) {
var img = canvas.toDataURL();
// store the image in an array, do stuff with it, etc.
recurser(--anIndex, callback);
}
})
}
一旦递归调用完成,它就会执行回调函数,这是一个可以处理图像的函数.
同样,只要对象在包含#mainDiv中所有div的滚动div中可见,所有这一切都可以正常工作.然而,一旦div的任何部分被滚动,它们就会呈现黑色.实际上,如果两个div中的一半被滚动(一个的上半部分,下一个的下半部分),它们都会呈现完全黑色.
推荐指数
解决办法
查看次数
为什么 html2canvas 顶部有一个空白区域？
我的有一个空白区域，我html2canvas不确定发生了什么。到目前为止，这是我的代码。
function doFunction() {
html2canvas(document.querySelector("#capture"), ).then(canvas => {
$("body").append(canvas);
});
}
$("button").click(function() {
doFunction();
});div {
box-sizing: border-box;
font-family: 'ABeeZee', sans-serif;
}
body {
background-color: red;
}
#capture {
width: 900px;
height: 900px;
background-color: aqua;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="http://html2canvas.hertzen.com/dist/html2canvas.js"></script>
<div id="capture">
Hello
</div>
<button type="button">Click Me!</button>这是附加的画布。请注意，顶部有一个空白区域。我怎样才能删除它？
推荐指数
解决办法
查看次数
SVG Text属性加倍 - HTML2CANVAS
这是mycode和JSFiddle的链接.
HTML
<input type="button" id="export" value="Export"/>
<svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<text x="162" text-anchor="middle" class="highcharts-title" zindex="4" style="color:#333333;font-size:18px;font-weight:normal;text-decoration:normal;font-family:Lucida Grande,Lucida Sans Unicode, Arial, Helvetica, sans-serif;visibility:visible;fill:#333333;width:260px;" y="25">Inventory</text>
</svg>
JS
$(document).ready(function(){
$('#export').on('click', function() {
html2canvas(document.body, {
onrendered: function(canvas) {
document.body.appendChild(canvas);
},
});
});
});
我正在尝试使用html2canvas库将svg转换为canvas图像.在示例中,我只是将画布图像附加到输出.您可以清楚地看到文本成倍增加.任何人都可以建议我解决这个问题.
希望我的问题很明确.提前致谢.
推荐指数
解决办法
查看次数
如何在截图前删除某些元素？
我可以使用下面的示例代码截取页面的截图:
html2canvas(document.body, {
onrendered: function(canvas) {
document.body.appendChild(canvas);
}
});
现在有一些div我在拍摄截图时不想成为页面的一部分吗？如何防止它们成为屏幕截图的一部分.
我想的一种方法是克隆元素然后删除元素,但是获取克隆的屏幕截图会给出一个白色屏幕.这是我使用的代码:
html2canvas($(document.body).clone()[0], {
onrendered: function(canvas) {
document.body.appendChild(canvas);
}
});
推荐指数
解决办法
查看次数
jsPDF在Chrome中不起作用,只适用于Firefox和Safari
我正在尝试使用jsPDF将应用程序导出为PDF.在浏览网页后,在这里抓取一行代码,在那里找到一个部分 - 我已经设法让它工作...... 有点.
它适用于Firefox和Safari,但不适用于Chrome.
使用的JS文件(来自jsPDF).也许是矫枉过正.和Jquery一起.
<script type="text/javascript" src="PDF/standard_fonts_metrics.js"></script>
<script type="text/javascript" src="PDF/split_text_to_size.js"></script>
<script type="text/javascript" src="PDF/from_html.js"></script>
<script type="text/javascript" src="PDF/addhtml.js"></script>
<script type="text/javascript" src="PDF/addimage.js"></script>
我正在使用的代码是这样的:
<script type="text/javascript">
function demoFromHTML() {
$('#listAreaPDF').css("display", "block");
var pdf = new jsPDF('p', 'pt', 'letter');
// source can be HTML-formatted string, or a reference
// to an actual DOM element from which the text will be scraped.
source = $('#listAreaPDF')[0];
pdf.setFontSize(24);
pdf.text(35, 40, "PDF Title here");
pdf.setFontSize(10);
pdf.text(500, 40, "Company Name AB");
// we support special element …推荐指数
解决办法
查看次数
标签 统计
html2canvas ×10
javascript ×8
html ×3
jquery ×2
canvas ×1
css ×1
google-maps ×1
html5 ×1
jspdf ×1
pdf ×1
svg ×1