This is a read-only archive of the Framer Community on Facebook.

What is Framer? Join the Community
Return to index
Emin İnanç Ünlü
Posted Mar 29 - Read on Facebook

Hey guys,

Is there any way to convert a layer to image dynamically? I need use this image as a mask like that:

layer.style["-webkit-mask"] = "url(generatedLayerImage.png)"

5 Comments

Krijn Rijshouwer

You could set clip to true on a layer that wraps the image layer? — If I understand correctly what you are trying to achieve here.

Benjamin Den Boer

Hey Emin İnanç Ünlü — if you're looking to use a variable within your image source, then you can use string-escaping. :-)

Like this:
"#{layerImage}.png"

Emin İnanç Ünlü

Not both. : ) I want to convert a layer in the prototype (all the layer with its children) to image and use the that image in this line I wrote. All these will need to happen dynamically while it's running. But still thanks for the answers. ; )

Krijn Rijshouwer

Then you should probably get the html dom element and convert it to a canvas element which you can then convert to a .PNG. Like in this Fiddle → https://jsfiddle.net/8ypxW/3/

Emin İnanç Ünlü

Krijn Rijshouwer yes it seems this is the way. But I need to figure out how to integrate this into Framer first. Thanks!

Read the entire post on Facebook