This JavaScript library helps you efficiently achieve 3D-like image distortion effects on Canvas 2D, with built-in warp, perspective, and skew effects.
npm install fabric-texture
# or
pnpm add fabric-texture-
Texture Class: Provides a Texture class that allows quick distortion transformations on Canvas 2D images, easily generating transformed image canvases.
-
Three Built-in Transformation Effects: Offers three built-in distortion effects, including regular warp, perspective transformation, and skew transformation.
-
Auxiliary Display Effects: Options to add auxiliary display effects such as dividing lines and split points on the transformed image to assist in observing the image transformation effects.
-
Anti-aliasing Control: Options to enable or disable anti-aliasing during the rendering of distorted images for smoother visual effects.
-
Control Input and Output Sizes: Options to control the input and output sizes of the transformed image, better managing the quality and efficiency of the generated transformed image.
-
Quickly Build Visual Editing Tools: Provides a FabricTexture class that, combined with Fabric.js, allows you to quickly build an interactive distortion editing tool based on a fabric.Canvas object. This tool enables canvas image transformations through visual interactions.
-
Custom Theme Colors: The built-in interactive editing tool allows configuration of custom theme colors and secondary theme colors.
-
Support for Custom Transformation Effects: Provides an AbstractMode class, based on which you can create custom transformation effects.
Check out the live demo for more code examples and explanations, or directly refer to the project API documentation.
This project is licensed under the MIT License - see the LICENSE file for details.
huanjinliu - huanjin.liu@foxmail.com