Please bookmark this page to avoid losing your image tool!

Image Format Converter

(Free & Supports Bulk Upload)

Drag & drop your images here or

The result will appear here...
You can edit the below JavaScript code to customize the image tool.
/**
 * Converts an image to a specified format using a canvas.
 * The function returns a promise that resolves with a new Image object.
 *
 * @param {HTMLImageElement} originalImg The original image object to convert.
 * @param {string} [format='png'] The target format (e.g., 'png', 'jpeg', 'webp', 'bmp').
 * @param {number} [quality=0.92] The image quality for lossy formats like 'jpeg' and 'webp', a value between 0.0 and 1.0.
 * @param {string} [backgroundColor='#ffffff'] The background color (e.g., '#FFF', 'blue') to use for formats that do not support transparency.
 * @returns {Promise<HTMLImageElement>} A promise that resolves with the new Image object in the target format.
 */
async function processImage(originalImg, format = 'png', quality = 0.92, backgroundColor = '#ffffff') {
  return new Promise((resolve, reject) => {
    // Create an in-memory canvas.
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');

    // Set the canvas dimensions to match the original image.
    canvas.width = originalImg.naturalWidth;
    canvas.height = originalImg.naturalHeight;

    // Normalize the format string to handle 'jpg' as 'jpeg'.
    const lowerFormat = format.toLowerCase().replace('jpg', 'jpeg');
    const mimeType = `image/${lowerFormat}`;

    // For formats that do not support transparency (like JPEG or BMP),
    // fill the canvas with a background color first.
    if (lowerFormat === 'jpeg' || lowerFormat === 'bmp') {
      ctx.fillStyle = backgroundColor;
      ctx.fillRect(0, 0, canvas.width, canvas.height);
    }

    // Draw the original image onto the canvas.
    ctx.drawImage(originalImg, 0, 0);

    // Convert the canvas content to a Data URL in the specified format and quality.
    let dataURL;
    try {
      // The quality argument is only applicable for 'image/jpeg' and 'image/webp'.
      dataURL = canvas.toDataURL(mimeType, quality);
    } catch (e) {
      return reject(new Error(`Conversion to format '${format}' failed. It may not be supported by your browser.`));
    }

    // Create a new Image object to hold the converted image.
    const resultImg = new Image();
    resultImg.onload = () => {
      resolve(resultImg);
    };
    resultImg.onerror = (err) => {
      reject(new Error('Failed to load the converted image data.'));
    };
    
    // Set the source of the new image to the Data URL.
    resultImg.src = dataURL;
  });
}

Free Image Tool Creator

Can't find the image tool you're looking for?
Create one based on your own needs now!

Description

The Image Format Converter is a versatile online tool designed to convert images between various formats, including PNG, JPEG, WebP, and BMP. Users can specify desired formats and adjust quality settings for lossy compressions, making it ideal for optimizing images for web use or ensuring compatibility across platforms. The tool is also capable of handling transparency and allows users to select a background color for formats that do not support it. This tool is useful for web developers, graphic designers, and anyone in need of efficient image format conversions.

Leave a Reply

Your email address will not be published. Required fields are marked *