1

i am trying to find a library (or another way...) that helps me out...

I have initially this image here:

enter image description here

but i wan to give the user the possibility to change (crop / bend) the image on the left side like this....

enter image description here

and on the right side like this

and on the right side like this:

enter image description here

i have alread checked these articles here:

How to bend/curve a image in html5 canvas

HTML5 Canvas: curve image along the path

Its a tool where the user can choose the size of his brushes he will order later... so conical sizes on the left and right side of the brush should be possible

I dont know, maybe I have to work with canvas objects, but maybe I can programatically find a solution to change some css styles to crop the image or shrink the image (but i think to shrink / bend the image doenst look really good)

Thx for any help or hints!

greetings

Alex

Edit:

I have found maybe a away to change the crop coordinates by doing this here: 

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

for example gives me something like this:

enter image description here

Edit2:

yes, I will give css "clip" a try

becasue something like this here should also be possible

enter image description here

-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%);
WEBGONDEL UG
  • 147
  • 1
  • 2
  • 12
  • Do you just need this for this exact shape, or will the user be able to modify the length/angle of this? Do you need this to work in a transparent fashion, or will the background always be white (or at least one uniform color), as in the given example? // Start with https://css-tricks.com/clipping-masking-css/ for basic inspiration and an overview of available techniques maybe. – CBroe Apr 13 '18 at 10:05
  • you can use [clip](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/clip) – apple apple Apr 13 '18 at 10:07
  • thx for your fast answer! Background is not important! and yes the user should normaly be able to change the height and the width of the image (means the dimension of his brush) and after that he should also be able to change for example on the left / right size a random peak-size. but the images i have loaded up are the 100% case. (maximum dimension of a peak) – WEBGONDEL UG Apr 13 '18 at 10:08
  • @appleapple: thx at the same moment i have found it and posted that to my initially post :p thx – WEBGONDEL UG Apr 13 '18 at 10:09
  • plus, if you use [clip](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/clip) instead of css, you get the ability to download clipped image for free. – apple apple Apr 13 '18 at 10:13
  • yes that is the goal later! User should create / configure / resize his brush, and download it after that as png... hopefully i can find a solution by myself, we'll see :D thx for your help! any other stretching or bend suggestions from Your side? – WEBGONDEL UG Apr 13 '18 at 10:20

1 Answers1

1

so the solution was really the clip css thing ;)

-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%);
WEBGONDEL UG
  • 147
  • 1
  • 2
  • 12