capturer div dans l'image en utilisant html2canvas
j'essaie de capturer une div dans une image en utilisant html2canvas
j'ai lu une question similaire ici comme
comment télécharger une capture d'écran en utilisant html2canvas?
créer une capture d'écran de la page Web en utilisant html2canvas (incapable d'initialiser correctement)
j'ai essayé le code
canvasRecord = $('#div').html2canvas();
dataURL = canvasRecord.toDataURL("image/png");
et le canvasRecord sera undefined après .html2canvas() appelé
et aussi ce
$('#div').html2canvas({
onrendered: function (canvas) {
var img = canvas.toDataURL()
window.open(img);
}
});
navigateur donne quelques (48 pour être exact) erreurs similaires comme:
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)
BTW, j'utilise v0.34 et j'ai ajouté le fichier de référence html2canvas.min.js et jquery.plugin.html2canvas.js
Comment puis-je convertir le div en canvas afin de capturer l'image.
EDIT le 26 / Mar / 2013
j'ai trouvé de Joel exemple .
mais malheureusement quand Google map intégré dans mon application, il y aura des erreurs.
<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>
5 réponses
j'ai rencontré le même type d'erreur que vous avez décrit, mais la mienne était due au fait que le dom n'était pas complètement prêt à partir. J'ai testé à la fois avec jQuery tirant la div et aussi getElementById juste pour être sûr qu'il n'y avait pas quelque chose d'étrange avec le sélecteur jQuery. Ci-dessous un exemple qui fonctionne dans 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>
Si vous voulez juste avoir capture d'écran d'un div, vous pouvez le faire comme ceci
html2canvas($('#div'), {
onrendered: function(canvas) {
var img = canvas.toDataURL()
window.open(img);
}
});
vous pouvez essayer ce code pour capturer un div quand le div est très large ou décalé par rapport à l'écran
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);
}
});
j'ai utilisé le code de Joel et j'ai fait un snippet
$(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>vous devriez essayer ceci (test, fonctionne au moins dans Firefox):
html2canvas(document.body,{
onrendered:function(canvas){
document.body.appendChild(canvas);
}
});
Im exécutant ces lignes de code pour obtenir le plein écran de navigateur (seulement l'écran visible, pas le site de trou):
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();
}
});
plus d'explications et d'options ici: http://html2canvas.hertzen.com/#/documentation.html