利用html2canvas保存图片时div中overflow:hidden也显示了出来

在一个div中(overflow:hidden)放入一个img，然后使用transform进行旋转，img有一部分超出了div的宽度或高度，此时使用html2canvas保存图片后发现hidden部分也显示在保存后的图片中，请问各位是否有遇到这种问题？谢谢

8 个解决方案

#1

这种情况没有遇到过，你看看动态删除，添加元素是否可以！
http://www.xttblog.com/?p=261

#2

紧急求救，现将主要html、css及html2canvas.js代码贴在下面，对比图片，看各位高手是否能找出问题所在，谢谢大家！
html:
<div id="divCanvasC">
<div id="divBgC"><img id="imgBgC" /></div>
<div id="canvasC" class="canvasC"><div id="divImgC"><img id="imgCanvasC" /></div>
<div id="divTextC"></div>
</div>
</div>
imgBgC为红色T恤大图，canvasC为灰色框范围的自定义区域，imgCanvasC为上传的kitty猫，divTextC为字母

CSS:
#divTextC { text-align:left; white-space:nowrap; display:inline-block; }
.canvasC { position:absolute; overflow: hidden; }
canvasC的长宽在js中控制

应该是html2canvas.js中这段代码对overflow:hidden部分进行clip:rect处理，但是保存结果却将hidden部分也显示出来了，不知道如何进行修改。用户进行设计时可以对图片及文字进行移动、旋转等操作。
NodeParser.prototype.calculateOverflowClips = function() {
    this.nodes.forEach(function(container) {
        if (isElement(container)) {
            if (isPseudoElement(container)) {
                container.appendToDOM();
            }
            container.borders = this.parseBorders(container);
            var clip = (container.css('overflow') === "hidden") ? [container.borders.clip] : [];
            var cssClip = container.parseClip();
            if (cssClip && ["absolute", "fixed"].indexOf(container.css('position')) !== -1) {
                clip.push([["rect",
                        container.bounds.left + cssClip.left,
                        container.bounds.top + cssClip.top,
                        cssClip.right - cssClip.left,
                        cssClip.bottom - cssClip.top
                ]]);
            }
            container.clip = hasParentClip(container) ? container.parent.clip.concat(clip) : clip;
            container.backgroundClip = (container.css('overflow') !== "hidden") ? container.clip.concat([container.borders.clip]) : container.clip;
            if (isPseudoElement(container)) {
                container.cleanDOM();
            }
        } else if (isTextNode(container)) {
            container.clip = hasParentClip(container) ? container.parent.clip : [];
        }
        if (!isPseudoElement(container)) {
            container.bounds = null;
        }
    }, this);
};

用户设计图：
利用html2canvas保存图片时div中overflow:hidden也显示了出来

通过html2canvas保存后的图片：
利用html2canvas保存图片时div中overflow:hidden也显示了出来

#3

有属性可以设置的

#4

请问版主是要设置什么属性？

#5

现在发现一个问题，试出来的结果图片其实是可以隐藏overflow部分，不过感觉html2canvas是先处理overflow，再处理transform:rotate，现在变成隐藏的总是图片下面部分

#6

问题的根源在使用clip:rect剪裁图片都是以正常图片进行的，怎样在使用transform:rotate后再使用clip:rect剪裁图片获取图片形状？

#7

楼主这样的其实没有必要用html2canvas之类的库。原因有以下两点：
1 从你的截图来看，应该是移动端应用。为了实现这一个功能，引用一个库是不划算的。
2 用别人不够成熟的库，维护起来麻烦。

所以建议直接上canvas。涉及到的只是图片裁剪，旋转，位移和缩放。所以不会太复杂。复杂的是你要结合移动端多指触控事件，触发canvas的这些改变。

#8

版主，请问一下这个问题解决了嘛

#1