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

[syszj]

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

[业余草]

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

[syszj]

紧急求救，现将主要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保存后的图片：

[业余草]

有属性可以设置的

[syszj]

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

[syszj]

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

[syszj]

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

[柯少侠]

楼主这样的其实没有必要用html2canvas之类的库。原因有以下两点： 1 从你的截图来看，应该是移动端应用。为了实现这一个功能，引用一个库是不划算的。 2 用别人不够成熟的库，维护起来麻烦。 所以建议直接上canvas。涉及到的只是图片裁剪，旋转，位移和缩放。所以不会太复杂。复杂的是你要结合移动端多指触控事件，触发canvas的这些改变。

[m0_38030600]

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

[卖芒小壮]

请问博主 最后是怎么解决的 我现在遇到了这样的问题 和你的一模一样

[韭菜企鹅]

请问博主，有没有解决问题，解决了问题能不能分享一下