CwaImageFomrattor: A Image Format Convertor Tool

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.

Preview Image

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>

Share It With Your Friends

Recent Posts

  • All Post
  • A.I.
  • AI
  • c
  • c++
  • computer
  • cryptocurrency
  • database
  • digital marketing
  • finance
  • hacking
  • HTML
  • java
  • Marketing
  • network
  • other
  • programming
  • python
  • react
  • social
  • Tools
  • Uncategorized
  • web devlopment
    •   Back
    • drawing In Python
DIY AI Voice Assistant In Python

September 8, 2023

Build your own AI assistant with Python! Learn to recognize voice commands, generate responses, and more. Create your virtual companion…

share it

Recent Posts

  • All Post
  • A.I.
  • AI
  • c
  • c++
  • computer
  • cryptocurrency
  • database
  • digital marketing
  • finance
  • hacking
  • HTML
  • java
  • Marketing
  • network
  • other
  • programming
  • python
  • react
  • social
  • Tools
  • Uncategorized
  • web devlopment
    •   Back
    • drawing In Python

Additional Content

CodeWithAM

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus luctus.

Products

Automated Chatbot

Data Security

Virtual Reality

Communication

Support

Services

FAQ's

Privacy Policy

Terms & Condition

Team

Contact Us

Company

About Us

Services

Features

Our Pricing

Latest News

© 2023 Codewitham