CwaImageFomrattor: A Image Format Convertor Tool

A M
February 3, 2023
2 Comments

CwaImageFomrattor: A Image Format Convertor Tool

Share It With Your Firends:

Introducing Cwaimageformattor – the custom image format convertor tool built for WordPress using the power of OpenAI’s ChatGPT. This tool is designed to simplify the process of converting images to various formats such as PNG, JPG, JPEG, and WebP, as well as compress images to reduce file size. With a user-friendly drag and drop feature, Cwaimageformattor is easy to use and can be integrated into your WordPress website to enhance the user experience.

Cwaimageformattor is built using HTML, CSS, and JavaScript, making it a dynamic and responsive tool that fits seamlessly into any WordPress website. The tool has a professional look and feel, thanks to the CSS code that was used to create it. And with the ability to quickly and easily convert and compress images, Cwaimageformattor is the perfect tool for website owners and developers who want to add a new level of functionality to their WordPress website.

Upload or Drag and Drop the image.

here is this source code:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
    </head>

    <style>
    
        body {
            background-color: #f2f2f2;
            font-family: Arial, sans-serif;
          }

          *{
            box-sizing: border-box;
          }
          
          .container {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 90%;
            max-width: 1000px;
            margin: 200px auto;
            box-shadow: 0 0 10px #ccc;
            background-color: #fff;
            padding: 30px 20px;
            border-radius: 15px;
          }

          .container .heading{
            text-align: center;
            text-transform: capitalize;
          }
          
          .upload-section {
            width: 50%;
            text-align: center;
            padding: 20px;
            overflow: hidden;
          }
          
          .upload-placeholder {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            height: 300px;
            cursor: pointer;
            background-color: #f2f2f2;
            border: 2px dashed #ccc;
            border-radius: 10px;
            margin: 20px 0;
          }
          
          .upload-placeholder p {
            margin: 10px 0;
            font-size: 18px;
            color: #ccc;
          }
          
          #preview-image {
            width: auto;
            max-width: 100%;
            max-height: 300px;
            object-fit: contain;
          }
          
          .convert-section {
            width: 50%;
            text-align: center;
            padding: 20px;
          }
          
          .convert-button {
            width: 100%;
            height: 60px;
            font-size: 18px;
            margin: 20px 0;
            border-radius: 10px;
            cursor: pointer;
            background-color: #fff;
            border: 1.5px solid #333;
            color: #333;
          }

          .convert-button:hover{
            background-color: #333;
            color: #ffff;
          }
          
          #download-link {
            display: none;
            width: 100%;
            height: 60px;
            font-size: 18px;
            margin: 20px 0;
            background-color: #333;
            color: #fff;
            border: none;
            border-radius: 10px;
            cursor: pointer;
            text-align: center;
            line-height: 60px;
            text-decoration: none;
          }
          
          @media (max-width: 767px) {
            .container {
              flex-direction: column;
            }
            .upload-section,
            .convert-section {
              width: 100%;
            }
          }
          
          
      
</style>
    <body>

        <div class="container">
            <div class="upload-section">
              <div class="upload-placeholder">
                <img id="preview-image" src="https://via.placeholder.com/150" alt="Preview Image">
                <input type="file" id="image-file" accept="image/*" style="display: none;">
              </div>
              <p>Upload or Drag and Drop the image.</p>
            </div>
            <div class="convert-section">
              <button id="jpg-button" class="convert-button">Convert to JPG</button>
              <button id="png-button" class="convert-button">Convert to PNG</button>
              <button id="jpeg-button" class="convert-button">Convert to JPEG</button>
              <a id="download-link" style="display: none;">Download</a>
            </div>
          </div>
          
          
          
          <script>
            const previewImage = document.querySelector("#preview-image");
const imageFile = document.querySelector("#image-file");
const uploadPlaceholder = document.querySelector(".upload-placeholder");
const jpgButton = document.querySelector("#jpg-button");
const pngButton = document.querySelector("#png-button");
const jpegButton = document.querySelector("#jpeg-button");
const downloadLink = document.querySelector("#download-link");




uploadPlaceholder.addEventListener("click", () => {
  imageFile.click();
});

imageFile.addEventListener("change", () => {
  const reader = new FileReader();
  reader.onload = (event) => {
    previewImage.src = event.target.result;
  };
  reader.readAsDataURL(imageFile.files[0]);
});

jpgButton.addEventListener("click", () => {
  convertImage("image/jpg");
});

pngButton.addEventListener("click", () => {
  convertImage("image/png");
});

jpegButton.addEventListener("click", () => {
  convertImage("image/jpeg");
});

function convertImage(type) {
  const canvas = document.createElement("canvas");
  const ctx = canvas.getContext("2d");
  const img = new Image();
  img.src = previewImage.src;
  canvas.width = img.width;
  canvas.height = img.height;
  ctx.drawImage(img, 0, 0);
  downloadLink.href = canvas.toDataURL(type);
  downloadLink.download = `converted-image.${type.split("/")[1]}`;
  downloadLink.style.display = "block";
  downloadLink.click();
}

            

          </script>

    </body>
</html>