javascript - JS : Bend height on left and right side of an image

Question

我正试图找到一个图书馆(或其他方式...)来帮助我...

我最初在这里有这张图片:

但我想让用户可以像这样更改(裁剪/弯曲)左侧的图像....

右边是这样的

右边是这样的:

我已经在这里查看了这些文章:

How to bend/curve a image in html5 canvas

HTML5 Canvas: curve image along the path

这是一个工具，用户可以在其中选择他稍后要订购的刷子的尺寸...因此刷子的左侧和右侧的圆锥形尺寸应该是可能的

我不知道，也许我必须使用 Canvas 对象，但也许我可以通过编程找到一个解决方案来更改一些 css 样式以裁剪图像或缩小图像(但我认为缩小/弯曲图像确实看起来好)

感谢任何帮助或提示!

问候

亚历克斯

编辑:

我发现可以通过在此处执行此操作来更改裁剪坐标:

-webkit-clip-path: polygon(100% 0, 100% 100%, 0% 50%);
clip-path: polygon(100% 0, 100% 100%, 0% 50%); 

例如给我这样的东西:

编辑2:

是的，我会试试 css“clip”

因为这里也应该有这样的东西

-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%);

Answer 1

所以解决方案实际上是剪辑 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%);