html2canvas截图overflow:hidden失效的问题

最新推荐文章于 2025-05-26 11:29:17 发布

SImon_Leo

最新推荐文章于 2025-05-26 11:29:17 发布

阅读量6.5k

点赞数 3

CC 4.0 BY-SA版权

分类专栏： Html Vue Jquery 文章标签： html canvas 图片移动

本文链接：https://blog.youkuaiyun.com/qq129169/article/details/71791036

Html 同时被 3 个专栏收录

5 篇文章

订阅专栏

Vue

5 篇文章

订阅专栏

Jquery

4 篇文章

订阅专栏

本文探讨了图片编辑过程中遇到的图片溢出问题，并提供了使用html2canvas进行截图时确保溢出部分不被包含在内的解决方案。通过调整容器设置及采用分步截图的方法，实现了精确的图片生成。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

首先这个问题会出现在需要图片编辑的业务中，在我们做图片旋转、放大、移动等操作时，被处理的图片会超出原本的容器，此时我们会给父容器增加一个属性overflow:hidden，这样就显示不会出现溢出问题，此时我们去做截图操作生成的图片正常的，hidden部分不会出现,可以有网上提问利用html2canvas保存图片时div中overflow:hidden也显示了出来,像这种情况本人在实际的运用中也是遇到过的。原因其实很简单的。
在html2canvas社区也提出这个问题Not hiding overflow:hidden data

其实就我们嵌套了两层容器，我们查看通常情况下overflow：hidden不起作用的一种情况，这些都是显示出了问题罢了，先看以代码
<1>、情景一

//父容器
  <div class="albumpreviewdiv">
          //添加图片的容器
          <div style="overflow: hidden;width: 100%" id="frame_content_add">
            <img  src="static/img/icon_tianjia@3x.png" class="frame_add" id="frame_add" >
          </div>
          //蒙版图 在最上层
          <img class="frame_mask" v-bind:src="getimg(frame_data.img)">
      </div>
  ......
 //截图操作
  var mainCancas = document.createElement("canvas"),
              ctx = mainCancas.getContext('2d');
      mainCancas.width = 800;
      mainCancas.height = 800 / _this.aspect_ratio;
      ctx.rect(0, 0, 800, 800 / _this.aspect_ratio);
      ctx.fillStyle = '#fff';
      ctx.fill();
      html2canvas($('.albumpreviewdiv'), {
        onrendered: function (canvas) {
          ctx.drawImage(canvas,0,0, 800, 800 / _this.aspect_ratio);
          var src = mainCancas.toDataURL();
          }});

效果图：
这里写图片描述结果还好，没有溢出，这是手机web生成的清晰还好，我的上一篇提到了截图模糊的问题。

<1>、情景二

  <div class="albumitemcontent">
    <a style="overflow: hidden;position: absolute;background:#F2F2F2;display: none" >
        <img  src="static/img/icon_tianjia@3x.png" style="width: 0.5rem;height: 0.5rem;position: absolute" >
        <img style="position: absolute;z-index: 100" onclick="document.querySelector('input').click()" @click="inputBtn($event)" >
    </a>
    <a style="overflow: hidden !important;position: absolute;background:#F2F2F2;display: none" >
        <img  src="static/img/icon_tianjia@3x.png" style="width: 0.5rem;height: 0.5rem;position: absolute" >
        <img style="position: absolute;z-index: 100" onclick="document.querySelector('input').click()" @click="inputBtn($event)">
    </a>
  </div>

此时布局页面变得复杂了，子容器不再是一个了，直接截图的结果就是
效果一我在右边的容器添加的图片截图结果左边也显示出来了，这就很尴尬了。方法那就只能分单个容器来操作了，最后在绘制到同一张画布上去，看代码

  var mainCancas = document.createElement("canvas"),
           ctx = mainCancas.getContext('2d');
   mainCancas.width = 1500/_this.zoom;
   mainCancas.height = 1500/_this.zoom/1.4150;
   ctx.rect(0, 0, 1500/_this.zoom, 1500/_this.zoom/1.4150);
   ctx.fillStyle = '#fff';
   ctx.fill();
   //左边
   html2canvas($('#base_f_'+0), {
                  onrendered: function(canvas0) {
                      ctx.drawImage(canvas0,_this.data[0][0].x/_this.zoom,_this.data[0][0].y/_this.zoom);
    //右边                  
   html2canvas($('#base_s_'+0), {
      onrendered: function(canvas1) {   
      //这里有事需要 设置绘制的初始点，x y值                         ctx.drawImage(canvas1,_this.data[0][1].x/_this.zoom,_this.data[0][1].y/_this.zoom);
                             // window.open(mainCancas.toDataURL("image/png"));                         
                              var url =mainCancas.toDataURL("image/png");
                              });
                          }});

                  }});