Draw Rectangle

Draw a customizable rectangle on an image with control over position, color, thickness, and fill.

Request Parameters

Response

Returns the image with the rectangle drawn on it, in the same format as the input file.

Example Request

    // example.sh
curl -X POST "https://oyyi.xyz/api/image/draw-rectangle"   -H "accept: application/json" \
  -H "Content-Type: multipart/form-data" \
  -F "file=@image.jpg" \
  -F "x1=100" \
  -F "y1=100" \
  -F "x2=400" \
  -F "y2=300" \
  -F "color=red" \
  -F "thickness=2" \
  --output rectangle.jpg
  

Example with Python

    // draw_rectangle.py
import requests

url = "https://oyyi.xyz/api/image/draw-rectangle"

files = {
    'file': open('image.jpg', 'rb')
}

data = {
    'x1': 100,
    'y1': 100,
    'x2': 400,
    'y2': 300,
    'color': 'red',
    'thickness': 3
}

response = requests.post(url, files=files, data=data)

# Save the image with rectangle
with open('rectangle.jpg', 'wb') as f:
    f.write(response.content)
  

Example with JavaScript

    // draw_rectangle.js
// Using fetch API
const formData = new FormData();
formData.append('file', fileInput.files[0]);
formData.append('x1', '100');
formData.append('y1', '100');
formData.append('x2', '400');
formData.append('y2', '300');
formData.append('color', 'red');
formData.append('thickness', '3');

fetch('https://oyyi.xyz/api/image/draw-rectangle', {
  method: 'POST',
  body: formData
})
.then(response => response.blob())
.then(blob => {
  // Create a URL for the blob
  const url = URL.createObjectURL(blob);

  // Create a link to download the image
  const a = document.createElement('a');
  a.href = url;
  a.download = 'rectangle.jpg';
  a.click();

  // Clean up by revoking the URL
  URL.revokeObjectURL(url);
})
.catch(error => console.error('Error:', error));
  

Rectangle Styles

How It Works

The draw-rectangle endpoint adds a customizable rectangle to an image:

1. Coordinate Calculation: The rectangle is defined by its top-left (x1, y1) and bottom-right (x2, y2) coordinates.
2. Color Processing: The specified color is parsed from a name or hex code.
3. Opacity Adjustment: If opacity is less than 1.0, the color is made semi-transparent.
4. Drawing: The rectangle is drawn on the image with the specified thickness.
5. Filling (Optional): If fill is true, the rectangle is filled with the specified color.
6. Rounding (Optional): If rounded is true, the corners are rounded with the specified radius.

The result is an image with a customized rectangle that can be used for highlighting, annotation, or masking purposes.

Common Use Cases

Error Responses

Notes

• Coordinates (0, 0) represent the top-left corner of the image.
• If the specified coordinates are outside the image boundaries, the rectangle will be clipped to fit within the image.
• For a square, set the width and height to be equal (i.e., x2 - x1 = y2 - y1).
• For a filled rectangle with some transparency, set fill to true and opacity to a value less than 1.0.
• The maximum file size allowed is 10MB.
• This operation preserves the alpha channel (transparency) if present in the original image.
• For multiple rectangles, make separate API calls for each rectangle.

Use Cases

• Highlighting areas of interest in screenshots or diagrams
• Creating bounding boxes for object detection or recognition
• Censoring or redacting sensitive information in images
• Marking regions for cropping or further processing
• Creating simple annotations or markups on images
• Designing UI mockups or wireframes
• Adding colored backgrounds for text or other elements