使用html2canvas将div捕获到图像中
Tim*_*ess 31 html javascript html5 html2canvas
我正在尝试使用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>
<script type="text/javascript" src="html2canvas.min.js"></script>
<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
<script language="javascript">
$(window).load(function(){
var mapOptions = {
backgroundColor: '#fff',
center: new google.maps.LatLng(1.355, 103.815),
overviewMapControl: true,
overviewMapControlOptions: { opened: false },
mapTypeControl: true,
mapTypeControlOptions: { position: google.maps.ControlPosition.TOP_LEFT, style: google.maps.MapTypeControlStyle.DROPDOWN_MENU },
panControlOptions: { position: google.maps.ControlPosition.RIGHT_CENTER },
zoomControlOptions: { position: google.maps.ControlPosition.RIGHT_CENTER },
streetViewControlOptions: { position: google.maps.ControlPosition.RIGHT_CENTER },
disableDoubleClickZoom: true,
mapTypeId: google.maps.MapTypeId.ROADMAP,
minZoom: 1,
zoom: 12
};
map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);
$('#load').click(function(){
html2canvas($('#testdiv'), {
onrendered: function (canvas) {
var img = canvas.toDataURL("image/png")
window.open(img);
}
});
});
});
</script>
</head>
<body>
<div id="testdiv">
</div>
<div id="map_canvas"></div>
<input type="button" value="Save" id="load"/>
</body>
</html>
Joe*_*ndt 19
我遇到了你描述的同样类型的错误,但我的错误是由于dom没有完全准备好去.我测试了jQuery拉div和getElementById只是为了确保jQuery选择器没有奇怪的东西.以下是适用于Chrome的示例:
<html>
<head>
<style type="text/css">
div {
height: 50px;
width: 50px;
background-color: #2C7CC3;
}
</style>
<script type="text/javascript" src="html2canvas.js"></script>
<script type="text/javascript" src="jquery-1.9.1.js"></script>
<script language="javascript">
$(document).ready(function() {
//var testdiv = document.getElementById("testdiv");
html2canvas($("#testdiv"), {
onrendered: function(canvas) {
// canvas is the final rendered <canvas> element
var myImage = canvas.toDataURL("image/png");
window.open(myImage);
}
});
});
</script>
</head>
<body>
<div id="testdiv">
</div>
</body>
</html>
- 我尝试了另一个测试并添加了一个图像作为div的元素,并将div的背景更改为图像.基本上,如果您尝试从chrome中的文件系统访问html或图像文件,它将无法工作.安全限制将导致其失败.`无法从画布获取图像数据,因为画布已被跨源数据污染.如果将其托管在服务器中,它将起作用. (3认同)
J.J*_*Kim 17
如果您只想拥有div的屏幕截图,可以这样做
html2canvas($('#div'), {
onrendered: function(canvas) {
var img = canvas.toDataURL()
window.open(img);
}
});
10 2022
这个问题已经很老了，但是如果有人正在寻找一个明确的解决方案来实施，那么它就在这里。这是使用带有html2canvas和FileSaver的纯 JS
我已经测试过并且工作正常。
捕获 div 内的所有内容。
步骤1
将脚本包含在页脚中。不需要jQuery ，这两个就可以了。如果您的文件中已有这两个文件，请注意正确的版本。我知道这是一件小事，但它很重要。
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/2.0.0/FileSaver.min.js"></script>
第2步
基本分区 该style属性是可选的。我在这里使用它是为了让它看起来像样。
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/2.0.0/FileSaver.min.js"></script>
它应该看起来像这样
步骤3
包含此脚本
<div id="savethegirl" style="background-color:coral;color:white;padding:10px;width:200px;">
I am a Pretty girl
</div>
<button onclick="myfunc()">Save the girl</button>
步骤4
单击该按钮，它应该保存文件。
资源
CDN 来自： https: //cdnjs.com/ 这是来自 Carlos Delgado 的文章 ( https://ourcodeworld.com/articles/read/415/how-to-create-a-screenshot-of-your-website-with- javascript-using-html2canvas）。我简化了它
如果这个答案有用的话。
点击向上箭头它将帮助其他人找到它。
小智 6
您可以尝试使用此代码捕获div当div非常宽或相对于屏幕偏移时
var div = $("#div")[0];
var rect = div.getBoundingClientRect();
var canvas = document.createElement("canvas");
canvas.width = rect.width;
canvas.height = rect.height;
var ctx = canvas.getContext("2d");
ctx.translate(-rect.left,-rect.top);
html2canvas(div, {
canvas:canvas,
height:rect.height,
width:rect.width,
onrendered: function(canvas) {
var image = canvas.toDataURL("image/png");
var pHtml = "<img src="+image+" />";
$("#parent").append(pHtml);
}
});