To change image, drag-and-drop an image file over the canvas
Channel X
Channel Y
Strength X
Strength Y
Offset X
Offset Y
Use input as mask
Transparent edges
Line mix
Opacity
Asset
Line out
Copy start X
Copy start Y
Copy width
Copy height
Fit
Scale
Paste position X
Paste position Y
Paste offset X
Paste offset Y
Smoothing
To note: Javascript is not running in this browser environment. The canvas element is ignored; instead a placeholder image displays where the canvas would have appeared.
Test purpose
Load a displacement map from the DOM
Create an image filter to load the map into the filter pipeline
Create a displace filter
Load another image and create a Picture entity to display this asset; apply the displace filter to it
Update filter attributes and observe the effect they have on the entity
Notes:
The displace filter needs both an input and mix line.
The input line defaults to the previous filter action's output, or the source image.
If the mix line data cannot be found ("broken" in the demo), the filter does no work.
This demo is using a process-image filter action to supply the mix line. When that action cannot locate its asset's data ("broken" in the demo), it will generate a transparent black ImageData object with the same dimensions as the displace action's source. This can result in some unexpected results, such as output image movement (relating to scale values).
The transparentEdges flag only has an effect when the useInputAsMask flag has been set to true.