Question

这让我发疯了。我只是想html2canvas捕获一个图像

我有：

<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>

结果是这张图片：

width and height not corresponding to the size of image

按钮出现在画布的底部，我想只保留按钮，任何关于如何只获取按钮的想法？

如果我改变画布的大小，那么结果如下：

enter image description here

这是按钮的代码：

<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>

和文件：

生成此按钮（页面中没有额外的css）： enter image description here

Answer 1

以下代码：

<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>

给我以下结果：

enter image description here

由此我得出结论

html2canvas在将图像添加到画布
您的按钮上可能有css可能会导致画布将其推得比您希望的更远

html2canvas：删除图片上方的空白区域

1 个答案: