现在项目有一个需求,在一张背景底图上的中心区域的线框之内,放置一些图片和文字素材,超出部分会被overflow:hidden,然后我用的html2canvas.js插件,正常是没有问题,但是如果里面的素材经过transform: rotate后,裁剪的会出现bug,表现为,旋转似乎未生效一样, 希望大家帮我分析下怎么解决这个问题,或者有其他插件能够避免这个问题,先跪谢了!
下面是正常裁剪的,没问题
图片描述
然后下面经过旋转的
图片描述
裁剪后就成这样了
图片描述
现在项目有一个需求,在一张背景底图上的中心区域的线框之内,放置一些图片和文字素材,超出部分会被overflow:hidden,然后我用的html2canvas.js插件,正常是没有问题,但是如果里面的素材经过transform: rotate后,裁剪的会出现bug,表现为,旋转似乎未生效一样, 希望大家帮我分析下怎么解决这个问题,或者有其他插件能够避免这个问题,先跪谢了!
下面是正常裁剪的,没问题
图片描述
然后下面经过旋转的
图片描述
裁剪后就成这样了
图片描述
这个可以自己做呀,我之前做的个类似的
http://jackgit.github.io/ImageEditor/app/demo.html
获取图片的transform中的scale, rotate, translate,然后用context中的对应方式进行操作然后绘制就好了
---更新链接地址---
http://demo.jackyang.me/image-editor/app/demo.html
10 回答11.1k 阅读
6 回答3k 阅读
5 回答4.8k 阅读✓ 已解决
4 回答3.1k 阅读✓ 已解决
2 回答2.6k 阅读✓ 已解决
3 回答5.1k 阅读✓ 已解决
5 回答1.9k 阅读
Css旋转元素应该对canvas绘制没有影响,你要旋转绘制的话应该canvas有旋转函数可以搜下。