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

Question

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

Jul*_*ien 5 javascript php jquery html2canvas

这让我发疯。我只是想 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>

Run Code Online (Sandbox Code Playgroud)

结果是这张图：

宽度和高度与图像大小不对应

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

如果我改变画布的大小，那么结果是这样的：

在此处输入图片说明

这是按钮的代码：

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

Run Code Online (Sandbox Code Playgroud)

和文件： .png .png

这使得这个按钮（页面中没有额外的 css）：在此处输入图片说明

Answer 1

Set*_*ine 1

下面的代码：

\n\n

<html>\n    <head>\n        <style>\n            canvas {\n                border: solid red 1px;\n            }\n        </style>\n    </head>\n<div id="post">\n    <div style="float:left;background:url(g.png);width:21px;height:53px;"></div>\n   <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\xc3\xa9poser</div>\n     <div style="float:left;background:url(d.png);width:21px;height:53px;"></div>\n</div>\n    <canvas width="500" height="200"></canvas>\n\n    <script type="text/javascript" src="jquery.js"></script>\n    <script type="text/javascript" src="html2canvas.js"></script>\n    <script type="text/javascript">\n       var canvas = document.querySelector("canvas");\n       html2canvas($("#post"), {canvas: canvas});\n\n//.then is an invalid function for html2canvas\n/*.then(function(canvas) {\n            var img = canvas.toDataURL()\n            window.open(img);\n       });\n*/\n    </script>\n</html>\n

Run Code Online (Sandbox Code Playgroud)\n\n

给我以下结果：

\n\n

在此输入图像描述

\n\n

由此我得出结论

\n\n

html2canvas 在将图像添加到画布的位置周围有少量填充
您的按钮上可能有CSS，这可能会导致画布将其向下推得比您想要的更远

\n

归档时间：	10 年，3 月前
查看次数：	5528 次
最近记录：	10 年，3 月前