Image Editor

 <!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8" />

  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>

  <title>Modern Image Editor</title>

  <style>

    body {

      margin: 0;

      font-family: 'Segoe UI', sans-serif;

      background: #f3f4f6;

      display: flex;

      flex-direction: column;

      align-items: center;

      padding: 20px;

    }


    .editor {

      max-width: 400px;

      width: 100%;

      background: white;

      padding: 20px;

      border-radius: 16px;

      box-shadow: 0 5px 20px rgba(0,0,0,0.1);

    }


    .editor h2 {

      text-align: center;

      color: #1f2937;

    }


    input[type="file"] {

      width: 100%;

      margin-bottom: 15px;

    }


    canvas {

      width: 100%;

      border-radius: 12px;

      margin-bottom: 15px;

    }


    .btn-group {

      display: flex;

      flex-wrap: wrap;

      gap: 10px;

      justify-content: center;

    }


    button {

      flex: 1 1 40%;

      padding: 10px;

      border: 2px solid #3b82f6;

      background: transparent;

      color: #3b82f6;

      font-weight: bold;

      border-radius: 10px;

      cursor: pointer;

      transition: all 0.3s ease;

    }


    button:hover {

      background: #3b82f6;

      color: white;

      transform: scale(1.05);

    }


    button:active {

      transform: scale(0.95);

    }


    .ad-box {

      margin-top: 20px;

      text-align: center;

    }

  </style>

</head>

<body>

  <div class="editor">

    <h2>Image Editor</h2>

    <input type="file" id="upload" accept="image/*" />

    <canvas id="canvas"></canvas>

    <div class="btn-group">

      <button onclick="rotate()">Rotate</button>

      <button onclick="flip()">Flip</button>

      <button onclick="reset()">Reset</button>

      <button onclick="download()">Download</button>

    </div>

  </div>


  <!-- Ad Section -->

  <div class="ad-box">

    <ins 

      style="width: 300px;height:250px" 

      data-width="300" 

      data-height="250" 

      class="nb87d540ec9" 

      data-domain="//data852.click" 

      data-affquery="/67cce2a9665d84f88e13/b87d540ec9/?placementName=Default">

    </ins>

    <script src="//data852.click/js/responsive.js" async></script>

  </div>


  <script>

    const upload = document.getElementById("upload");

    const canvas = document.getElementById("canvas");

    const ctx = canvas.getContext("2d");


    let image = new Image();

    let angle = 0;

    let flipped = false;

    let originalData = null;


    upload.addEventListener("change", (e) => {

      const file = e.target.files[0];

      const reader = new FileReader();


      reader.onload = () => {

        image.src = reader.result;

      };

      reader.readAsDataURL(file);

    });


    image.onload = () => {

      drawImage();

      originalData = ctx.getImageData(0, 0, canvas.width, canvas.height);

    };


    function drawImage() {

      canvas.width = image.width;

      canvas.height = image.height;

      ctx.clearRect(0, 0, canvas.width, canvas.height);

      ctx.save();


      // Apply rotation and flipping

      ctx.translate(canvas.width / 2, canvas.height / 2);

      ctx.rotate((angle * Math.PI) / 180);

      ctx.scale(flipped ? -1 : 1, 1);

      ctx.drawImage(image, -image.width / 2, -image.height / 2);


      ctx.restore();

    }


    function rotate() {

      angle = (angle + 90) % 360;

      drawImage();

    }


    function flip() {

      flipped = !flipped;

      drawImage();

    }


    function reset() {

      angle = 0;

      flipped = false;

      drawImage();

    }


    function download() {

      const link = document.createElement("a");

      link.download = "edited-image.png";

      link.href = canvas.toDataURL();

      link.click();

    }

  </script>

</body>

</html>

Comments

Post a Comment

Popular posts from this blog

Privacy policy text to pdf to image converter

  Privacy Policy This privacy policy applies to the Text to pdf to image converter app (hereby referred to as "Application") for mobile devices that was created by Amravati patle (hereby referred to as "Service Provider") as a Free service. This service is intended for use "AS IS". Information Collection and Use The Application collects information when you download and use it. This information may include information such as Your device's Internet Protocol address (e.g. IP address) The pages of the Application that you visit, the time and date of your visit, the time spent on those pages The time spent on the Application The operating system you use on your mobile device The Application does not gather precise information about the location of your mobile device. The Service Provider may use the information you provided to contact you from time to time to provide you with important information, required notices and marketing promotions. For a better e...
Read more

Privacy policy text to pdf converter

  Privacy Policy This privacy policy applies to the Text to pdf converter app (hereby referred to as "Application") for mobile devices that was created by Amravati patle (hereby referred to as "Service Provider") as a Free service. This service is intended for use "AS IS". Information Collection and Use The Application collects information when you download and use it. This information may include information such as Your device's Internet Protocol address (e.g. IP address) The pages of the Application that you visit, the time and date of your visit, the time spent on those pages The time spent on the Application The operating system you use on your mobile device The Application does not gather precise information about the location of your mobile device. The Service Provider may use the information you provided to contact you from time to time to provide you with important information, required notices and marketing promotions. For a better experience...
Read more