Categories

Image Composite Matrix

Apply composite transformation by combining multiple basic transformations (scaling, rotation, shearing). See how transformation matrices multiply and create complex effects.

Click to upload file or drag and drop file here

Maximum file size: 10MB Supported formats: image/jpeg, image/png, image/webp, image/gif, image/bmp, image/tiff

Upload any image file (JPEG, PNG, WebP, GIF, BMP, TIFF) for composite matrix transformation

0.1 1.0 3

Horizontal scaling factor (0.1 to 3.0, 1.0 = original size)

0.1 1.0 3

Vertical scaling factor (0.1 to 3.0, 1.0 = original size)

-180 0 180

Rotation angle in degrees (-180 to 180, 0 = no rotation)

-1.5 0 1.5

Horizontal shear factor (-1.5 to 1.5, 0 = no shear)

-1.5 0 1.5

Vertical shear factor (-1.5 to 1.5, 0 = no shear)

Order in which transformations are applied (right-to-left multiplication)

Background color for transparent areas (hex #RRGGBB or #RRGGBBAA, or color name)

Choose output format or keep original. PNG recommended for transparency

Output quality for lossy formats (JPEG, WebP). Higher = better quality but larger file size

Key Facts

Category
Media
Input Types
file, range, select, text, number
Output Type
file
Sample Coverage
4
API Ready
Yes

Overview

The Image Composite Matrix tool allows you to apply complex geometric transformations to your images by combining scaling, rotation, and shearing operations. By calculating the multiplication of transformation matrices, this utility enables precise control over how your image is manipulated and rendered.

When to Use

  • When you need to apply multiple geometric transformations to an image in a specific mathematical order.
  • When you are studying linear algebra and want to visualize how transformation matrices affect image pixels.
  • When you need to perform precise image warping or orientation adjustments that standard cropping tools cannot achieve.

How It Works

  • Upload your source image file in any supported format like PNG, JPEG, or WebP.
  • Adjust the scaling, rotation, and shearing parameters to define your desired transformation.
  • Select the specific transformation order to determine how the matrices are multiplied.
  • Set your output format and background color preferences, then process the image to download the result.

Use Cases

Creating custom geometric distortions for graphic design projects.
Educational demonstrations of linear algebra and matrix multiplication in computer graphics.
Batch-processing images that require specific orientation and scaling adjustments for web layouts.

Examples

1. Isometric Perspective Shift

Graphic Designer
Background
A designer needs to transform a flat 2D icon into an isometric-style graphic for a UI mockup.
Problem
Standard rotation tools do not provide the necessary shearing to achieve a true isometric perspective.
How to Use
Upload the icon, set the rotation to 45 degrees, and apply a horizontal shear of 0.5.
Example Config
angle: 45, shearX: 0.5, transformOrder: 'rotate-shear-scale'
Outcome
The icon is successfully skewed and rotated, creating a professional isometric appearance.

2. Mathematical Visualization

Computer Science Student
Background
A student is learning about matrix concatenation and needs to see how different sequences of operations change an image.
Problem
Manually calculating matrix products is error-prone and difficult to visualize.
How to Use
Upload a test grid image and experiment with different 'Transformation Order' settings to observe the visual output.
Example Config
scaleX: 1.5, scaleY: 1.5, angle: 30, transformOrder: 'scale-rotate-shear'
Outcome
The student can visually verify the impact of matrix multiplication order on the final rendered image.

Try with Samples

image, png, jpg

Related Hubs

FAQ

What does the transformation order mean?

The order determines the sequence in which the matrices are multiplied (right-to-left). Changing the order significantly alters the final visual result because matrix multiplication is non-commutative.

Can I keep the image transparency?

Yes, if you choose PNG as your output format and set the background to 'transparent', the tool will preserve the alpha channel of your original image.

What is the maximum file size I can upload?

The tool supports image files up to 10MB.

How does shearing affect the image?

Shearing shifts the image along the X or Y axis, effectively slanting the image to create a parallelogram effect based on the factor provided.

Why is the output image size different?

Transformations like rotation and shearing change the bounding box of the image, which may result in a different canvas size compared to the original file.

API Documentation

Request Endpoint

POST /en/api/tools/image-composite-matrix

Request Parameters

Parameter Name Type Required Description
imageFile file (Upload required) Yes Upload any image file (JPEG, PNG, WebP, GIF, BMP, TIFF) for composite matrix transformation
scaleX range Yes Horizontal scaling factor (0.1 to 3.0, 1.0 = original size)
scaleY range Yes Vertical scaling factor (0.1 to 3.0, 1.0 = original size)
angle range Yes Rotation angle in degrees (-180 to 180, 0 = no rotation)
shearX range Yes Horizontal shear factor (-1.5 to 1.5, 0 = no shear)
shearY range Yes Vertical shear factor (-1.5 to 1.5, 0 = no shear)
transformOrder select Yes Order in which transformations are applied (right-to-left multiplication)
background text No Background color for transparent areas (hex #RRGGBB or #RRGGBBAA, or color name)
format select No Choose output format or keep original. PNG recommended for transparency
quality number No Output quality for lossy formats (JPEG, WebP). Higher = better quality but larger file size

File type parameters need to be uploaded first via POST /upload/image-composite-matrix to get filePath, then pass filePath to the corresponding file field.

Response Format

{
  "filePath": "/public/processing/randomid.ext",
  "fileName": "output.ext",
  "contentType": "application/octet-stream",
  "size": 1024,
  "metadata": {
    "key": "value"
  },
  "error": "Error message (optional)",
  "message": "Notification message (optional)"
}
File: File

AI MCP Documentation

Add this tool to your MCP server configuration:

{
  "mcpServers": {
    "elysiatools-image-composite-matrix": {
      "name": "image-composite-matrix",
      "description": "Apply composite transformation by combining multiple basic transformations (scaling, rotation, shearing). See how transformation matrices multiply and create complex effects.",
      "baseUrl": "https://elysiatools.com/mcp/sse?toolId=image-composite-matrix",
      "command": "",
      "args": [],
      "env": {},
      "isActive": true,
      "type": "sse"
    }
  }
}

You can chain multiple tools, e.g.: `https://elysiatools.com/mcp/sse?toolId=png-to-webp,jpg-to-webp,gif-to-webp`, max 20 tools.

Supports URL file links or Base64 encoding for file parameters.

If you encounter any issues, please contact us at [email protected]