Menu
This makes me crazy. I simply would like html2canvas capture an image
I have that:
<div id="post" class="xx">Déposer</div>
<canvas width="500" height="200"></canvas>
<script type="text/javascript" src="html2canvas.js"></script>
<script type="text/javascript">
var canvas = document.querySelector("canvas");
html2canvas($("#post"), {canvas: canvas}).then(function(canvas) {
var img = canvas.toDataURL()
window.open(img);
});
</script>
The result is this image:
The button appear at the bottom of the canvas, and I would like to keep only the button, any idea on how to get only the button ?
If I change the size of the canvas, then the result is like this:
and here is the code of the button :
<div id="post">
<div style="float:left;background:url(g.png);width:21px;height:53px;"></div>
<div id="c" style="float:left;background:url(c.png) repeat-x;height:53px;font-family:arial;text-shadow: -1px -1px rgba(0, 0, 0, 0.3);padding: 12px 20px;font-size: 20px;line-height: 24px;color: rgb(255, 255, 255);text-align: center;vertical-align: middle;text-decoration: none;">Déposer</div>
<div style="float:left;background:url(d.png);width:21px;height:53px;"></div>
</div>
and the files :
which makes this button (no extra css in the page) :
732
The following code:
<html>
<head>
<style>
canvas {
border: solid red 1px;
}
</style>
</head>
<div id="post">
<div style="float:left;background:url(g.png);width:21px;height:53px;"></div>
<div id="c" style="float:left;background:url(c.png) repeat-x;height:53px;font-family:arial;text-shadow: -1px -1px rgba(0, 0, 0, 0.3);padding: 12px 20px;font-size: 20px;line-height: 24px;color: rgb(255, 255, 255);text-align: center;vertical-align: middle;text-decoration: none;">Déposer</div>
<div style="float:left;background:url(d.png);width:21px;height:53px;"></div>
</div>
<canvas width="500" height="200"></canvas>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="html2canvas.js"></script>
<script type="text/javascript">
var canvas = document.querySelector("canvas");
html2canvas($("#post"), {canvas: canvas});
//.then is an invalid function for html2canvas
/*.then(function(canvas) {
var img = canvas.toDataURL()
window.open(img);
});
*/
</script>
</html>
Gives me the following results:
From that I would conclude
126
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
