dpict99695329
dpict99695329
2015-07-09 15:55
采纳率: 100%
浏览 1.3k

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>

结果是这样的图像:

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>

和文件 : c.pngd.pngg.png

这使得该按钮(页面中没有多余的CSS): enter image description here

图片转代码服务由CSDN问答提供 功能建议

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

我有:

 &lt; div id =“post”class =“xx”  &gt;Déposer&lt; / div&gt; 
&lt; canvas width =“500”height =“200”&gt;&lt; / canvas&gt; 
 
&lt; script type =“text / javascript”src =“html2canvas.js”&gt;  &lt; / script&gt; 
&lt; script type =“text / javascript”&gt; 
 var canvas = document.querySelector(“canvas”); 
 html2canvas($(“#post”),{canvas:canvas})  .then(function(canvas){
 var img = canvas.toDataURL()
 window.open(img); 
}); 
&lt; / script&gt; 
   
  
 

结果是这张图片:

按钮出现在画布的底部,我想只保留按钮,任何关于如何只获取按钮的想法?< / p>

如果我更改画布的大小,则结果如下:

这里是按钮的代码:

 &lt; div id =”post“&gt; 
&lt;  div style =“float:left; background:url(g.png); width:21px; height:53px;”&gt;&lt; / div&gt; 
&lt; 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;行高:24px;颜色:rgb(255,255,255); text-align:center; vertical-align:middle; text-decoration:none;“&gt;Déposer&lt; / div&gt; 
&lt; div 风格= “浮动:左;背景:网址(d.png);宽度:21px;高度:53px;” &GT;&LT; / DIV&GT; 
&LT; / DIV&GT; 
   
  
 

和文件:

生成此按钮(页面中没有额外的css):

  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 邀请回答

1条回答 默认 最新

  • dongzhou8764
    dongzhou8764 2015-07-09 16:25
    已采纳

    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:

    enter image description here

    From that I would conclude

    • html2canvas has a small amount of padding around where it adds the image to canvas
    • You may have css on your button that may be causing the canvas to push it down farther than you would like
    点赞 评论

相关推荐