【发布时间】：2018-04-13 09:59:42
【问题描述】：
我正在努力寻找可以帮助我的图书馆（或其他方式...）...
我最初在这里有这张图片：
但我希望用户可以像这样更改（裁剪/弯曲）左侧的图像....
右边是这样的
右边是这样的：
我已经在这里查看过这些文章：
How to bend/curve a image in html5 canvas
HTML5 Canvas: curve image along the path
它是一个工具，用户可以在其中选择他以后订购的画笔大小......所以画笔左右两侧的锥形尺寸应该是可能的
我不知道，也许我必须使用画布对象，但也许我可以通过编程找到一种解决方案来更改一些 css 样式以裁剪图像或缩小图像（但我认为缩小/弯曲图像看起来真的好）
感谢任何帮助或提示！
问候
亚历克斯
编辑：
我发现可以通过在此处执行此操作来更改裁剪坐标：
-webkit-clip-path: polygon(100% 0, 100% 100%, 0% 50%);
clip-path: polygon(100% 0, 100% 100%, 0% 50%);
例如给我这样的东西：
编辑2：
是的，我会试试css“剪辑”
因为这里应该也可以这样做
-webkit-clip-path: polygon(17% 0, 70% 0%, 100% 0, 100% 100%, 70% 100%, 16% 99%, 0 46%);
clip-path: polygon(17% 0, 70% 0%, 100% 0, 100% 100%, 70% 100%, 16% 99%, 0 46%);
【问题讨论】：
-
您只需要这个精确的形状，还是用户可以修改它的长度/角度？您是否需要它以透明的方式工作，或者背景将始终为白色（或至少一种统一颜色），如给定示例中所示？ // 从css-tricks.com/clipping-masking-css 开始，以获得基本灵感和可用技术的概述。
-
你可以使用clip
-
感谢您的快速回答！背景不重要！是的，用户通常应该能够改变图像的高度和宽度（意味着他的画笔的尺寸），之后他还应该能够改变例如左/右大小的随机峰值大小。但我加载的图像是 100% 的情况。 （峰的最大尺寸）
-
@appleapple：谢谢在我找到它并将其发布到我最初的帖子的同时：p thx
-
另外，如果你使用clip而不是css，你可以免费下载剪辑的图像。
标签： javascript image crop shrink