zoltan-dulac / polyclip Goto Github PK

Hi there,
I'd like to use it on a video.
Is that possible?

Thanks!

Hi i'm using the library in a image editor and I want to know if exist any method onComplete or any callback to know if the process is ready.

Thanks

Hi,
I am trying to get your example with the "Animated Image Masking" to work with an SVG path for the clipping mask.

So far, I have included canvg.js and used a circle path ("path: M 100, 100 m -75, 0 a 75,75 0 1,0 150,0 a 75,75 0 1,0 -150,0") for the data-polyclip attribute:

<img id="polyclip-ol" src="/library/images/mask.png" alt="polyclip test overlay" data-polyclip="path: M 100, 100 m -75, 0 a 75,75 0 1,0 150,0 a 75,75 0 1,0 -150,0" />  

I am able to see a circular clipped image, but it's not following the cursor position anymore. I guess that it has something to do with the transform function of polyclip?

polyClip.transformClip(maskImage, 'translateX(' + x + 'px)');   

Do you have an idea, where i am stuck? Or is this even possible?
Thanks in advance for any hint on this!
Cheers Dario

I am using above js file and I am loading js file asynchronously by adding 'async' attribute.
So after that I am getting below error:

"Failed to execute 'write' on 'Document': It isn't possible to write into a document from an asynchronously-loaded external script unless it is explicitly opened."

And I am getting this error on this line:
document.write('<style type="text/css">img[data-polyclip], img.polyClip { visibility: hidden; } </style>')

Can you please check this issue.

I'd like to know if there is a way to set the width and height of the image that is being masked.