社区
HTML5
帖子详情
利用html2canvas保存图片时div中overflow:hidden也显示了出来
syszj
2016-06-07 09:29:37
在一个div中(overflow:hidden)放入一个img,然后使用transform进行旋转,img有一部分超出了div的宽度或高度,此时使用html2canvas保存图片后发现hidden部分也显示在保存后的图片中,请问各位是否有遇到这种问题?谢谢
...全文
2088
10
打赏
收藏
利用html2canvas保存图片时div中overflow:hidden也显示了出来
在一个div中(overflow:hidden)放入一个img,然后使用transform进行旋转,img有一部分超出了div的宽度或高度,此时使用html2canvas保存图片后发现hidden部分也显示在保存后的图片中,请问各位是否有遇到这种问题?谢谢
复制链接
扫一扫
分享
转发到动态
举报
写回复
配置赞助广告
用AI写文章
10 条
回复
切换为时间正序
请发表友善的回复…
发表回复
打赏红包
韭菜企鹅
2019-06-19
打赏
举报
回复
请问博主,有没有解决问题,解决了问题能不能分享一下
卖芒小壮
2019-01-17
打赏
举报
回复
请问博主 最后是怎么解决的 我现在遇到了这样的问题 和你的一模一样
m0_38030600
2017-08-10
打赏
举报
回复
版主,请问一下这个问题解决了嘛
柯少侠
2016-06-10
打赏
举报
回复
楼主这样的其实没有必要用html2canvas之类的库。原因有以下两点: 1 从你的截图来看,应该是移动端应用。为了实现这一个功能,引用一个库是不划算的。 2 用别人不够成熟的库,维护起来麻烦。 所以建议直接上canvas。涉及到的只是图片裁剪,旋转,位移和缩放。所以不会太复杂。复杂的是你要结合移动端多指触控事件,触发canvas的这些改变。
syszj
2016-06-10
打赏
举报
回复
问题的根源在使用clip:rect剪裁图片都是以正常图片进行的,怎样在使用transform:rotate后再使用clip:rect剪裁图片获取图片形状?
syszj
2016-06-10
打赏
举报
回复
现在发现一个问题,试出来的结果图片其实是可以隐藏overflow部分,不过感觉html2canvas是先处理overflow,再处理transform:rotate,现在变成隐藏的总是图片下面部分
syszj
2016-06-10
打赏
举报
回复
请问版主是要设置什么属性?
业余草
2016-06-10
打赏
举报
回复
有属性可以设置的
syszj
2016-06-09
打赏
举报
回复
紧急求救,现将主要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保存后的图片:
业余草
2016-06-07
打赏
举报
回复
这种情况没有遇到过,你看看动态删除,添加元素是否可以!
http://www.xttblog.com/?p=261
HTML5 Canvas拼图游戏开发
本课程基于HTML5的Canvas编程技术、JavaScript和CSS等前端技术,实现了拼图游戏的开发过程,可以借此课程初步掌握网页游戏的开发过程和思路,并加强对H5等前端技术的熟练掌握。
html2canvas
截图
overflow
:
hidden
失效的问题
首先这个问题会出现在需要图片编辑的业务
中
,在我们做图片旋转、放大、移动等操作
时
,被处理的图片会超出原本的容器,此
时
我们会给父容器增加一个属性
overflow
:
hidden
,这样就
显示
不会出现溢出问题,此
时
我们去做截图操作生成的图片正常的,
hidden
部分不会出现,可以有网上提问
利用
html2canvas
保存图片
时
div
中
overflow
:
hidden
也
显示
了出来,像这种情况本人在实际的运用
中
也是遇到
微信小程序
overflow
:
hidden
不生效问题
#z
div
1{
overflow
:
hidden
;} #roll{list-style:none;position:absolute;} #roll li{float:left;} &lt;
div
id="z
div
1"&gt; &lt;ul id="roll"&gt; &lt;li&gt;1&l
八、
overflow
:
hidden
;搭配定位不会被修剪的特殊情况
一、知识点:1.
overflow
是指内容溢出元素的框发生的情况; 属性值:visible 默认值,内容呈现在元素框外;
hidden
内容裁剪,超出内容不可见; scoll 超出部分生成滚动条
显示
; auto 如果内容被修剪,则浏览器会
显示
滚动条以便查看其余的内容; inherit 规定从父元素继承
overflow
属性的值;2.相对定位: position:relati...
html2canvas
文字重叠,简单记录
html2canvas
网页
中
的图片无法
显示
的问题
html2canvas
绘制图片,如果页面
中
存在img,出现绘制的结果无图片
时
,原因如下:(建议逐步查找)1.绘制
时
间过早,图片尚未加载解决方式:通过setTimeout延迟绘制或者通过img.onload监听图片是否绘制完成2.绘制的图片跨域问题解决方式:图片生成前,添加 image.crossOrigin = "*";切记:要在图片赋值之前添加3.如果出现安卓或者pc端正常
显示
,ios端无法
显示
...
HTML5
39,087
社区成员
5,547
社区内容
发帖
与我相关
我的任务
HTML5
HTML5是构建Web内容的一种语言描述方式。HTML5是互联网的下一代标准,是构建以及呈现互联网内容的一种语言方式.被认为是互联网的核心技术之一。
复制链接
扫一扫
分享
社区描述
HTML5是构建Web内容的一种语言描述方式。HTML5是互联网的下一代标准,是构建以及呈现互联网内容的一种语言方式.被认为是互联网的核心技术之一。
社区管理员
加入社区
获取链接或二维码
近7日
近30日
至今
加载中
查看更多榜单
社区公告
暂无公告
试试用AI创作助手写篇文章吧
+ 用AI写文章