javascript - uncaught - capturar div en imagen usando html2canvas
screenshot pdf javascript (5)
Debes intentar esto (prueba, funciona al menos en Firefox):
html2canvas(document.body,{
onrendered:function(canvas){
document.body.appendChild(canvas);
}
});
Estoy ejecutando estas líneas de código para obtener la pantalla completa del navegador (solo la pantalla visible, no el sitio del agujero):
var w=window, d=document, e=d.documentElement, g=d.getElementsByTagName(''body'')[0];
var y=w.innerHeight||e.clientHeight||g.clientHeight;
html2canvas(document.body,{
height:y,
onrendered:function(canvas){
var img = canvas.toDataURL();
}
});
Más explicaciones y opciones aquí: http://html2canvas.hertzen.com/#/documentation.html
Estoy tratando de capturar un div en una imagen usando html2canvas
He leído alguna pregunta similar aquí como
¿Cómo subir una captura de pantalla usando html2canvas?
crear una captura de pantalla de la página web usando html2canvas (no se puede inicializar correctamente)
He probado el codigo
canvasRecord = $(''#div'').html2canvas();
dataURL = canvasRecord.toDataURL("image/png");
y el canvasRecord quedará undefined después de que se .html2canvas() llamado .html2canvas()
y también esto
$(''#div'').html2canvas({
onrendered: function (canvas) {
var img = canvas.toDataURL()
window.open(img);
}
});
El navegador da algunos errores similares (48 para ser exactos) como:
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)
Por cierto, estoy usando v0.34 y he agregado el archivo de referencia html2canvas.min.js y jquery.plugin.html2canvas.js
¿Cómo puedo convertir el div en canvas para capturar la imagen.
EDITAR el 26 / mar / 2013
Encontré los trabajos de ejemplo de Joel .
Pero, lamentablemente, cuando Google Maps incrustado en mi aplicación, habrá errores.
<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>
Me encontré con el mismo tipo de error que describiste, pero el mío se debió a que el dom no estaba completamente listo para funcionar. Probé con jQuery tirando del div y con getElementById solo para asegurarme de que no había algo extraño con el selector jQuery. A continuación se muestra un ejemplo que funciona en 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>
Puede probar este código para capturar un div Cuando el div es muy ancho o está desplazado en relación con la pantalla
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);
}
});
Si solo quieres tener una captura de pantalla de un div, puedes hacerlo así
html2canvas($(''#div''), {
onrendered: function(canvas) {
var img = canvas.toDataURL()
window.open(img);
}
});
Usé el código de Joel e hice un fragmento
$(document).ready(function() {
$("#button").click(function(){
html2canvas($("#testdiv"), {
onrendered: function(canvas) {
// canvas is the final rendered <canvas> element
var myImage = canvas.toDataURL("image/png");
window.open(myImage);
}
});
});
});
div {
width: 150px;
background-color: #2C7CC3;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="testdiv">
This is an image
</div>
<p id="button">Click me</p>