Free image resize and rotate API

This API is great for creating thumbnails or preview images for your application, or if you just want to schrink an image of yours. We also support rotation of the images. Just pass in the image file and the new dimensions and/or degrees of how you want your new image to be rotated.

Examples

Let's do some examples of how the API can be consumed. Let's start with the endpoint, example below is done in JavaScript.

const formData = new FormData();
formData.append("file", data, "filename");
formData.append("width", width);
formData.append("height", height);
formData.append("rotate", rotation);

const response = await fetch(`https://media.algobook.info/upload`, {
  method: "POST",
  body: formData,
});

Breakdown of the data

• file is the image file, it should be in base64 format (generally from a file input element)
• width is a number representing the new width (mandatory)
• height is a number representing the new height (mandatory)
• rotate is a number representing the degrees that the image should be rotated (optional)

The response from the API will look like this:

{
  "base64": "base64 representation of the image"
}

Example in React

Below we will do a simple implementation of how to use the API from a React application. We will create a simple file input element that will choose an image, we will then set new dimensions to 100x100 and rotate the image 180 degrees. Once the image is processed, we will create a download link for the user to download the new image.

import { useState } from "react";

export const FileUpload = () => {
  const [file, setFile] = useState();
  const [downloadUrl, setDownloadUrl] = useState();

  const base64ToBlob = (base64) => {
    const byteCharacters = window.atob(base64);
    const byteNumbers = new Array(byteCharacters.length);
    for (let i = 0; i < byteCharacters.length; i++) {
      byteNumbers[i] = byteCharacters.charCodeAt(i);
    }
    const byteArray = new Uint8Array(byteNumbers);
    return new Blob([byteArray]);
  };

  const onFileChoose = (event) => {
    const file = event.target.files[0];
    setFile(file);
  };

  const onFileUpload = async () => {
    const formData = new FormData();
    formData.append("file", file, file.name);
    formData.append("width", "100");
    formData.append("height", "100");
    formData.append("rotate", "180");

    const response = await fetch(`https://media.algobook.info/upload`, {
      method: "POST",
      body: formData,
    });
    const data = await response.json();
    setDownloadUrl(URL.createObjectURL(base64ToBlob(data.base64)));
  };

  return (
    <div>
      <input
        id="fileInput"
        className="fileInput"
        onChange={onFileChoose}
        type="file"
        accept="image/png, image/jpg, image/jpeg"
      />

      <button disabled={!file} onClick={onFileUpload}>
        Upload
      </button>

      {downloadUrl && (
        <a href={downloadUrl} download={`resized_${file.name}`}>
          Download new image
        </a>
      )}
    </div>
  );
};

Feedback and questions

Are something missing from the API? Do you want some additional feature? Please reach out, we really want to improve our stuff to fit all the needs that are out there. Contact us here.