01- New Beginning

The cover photo was taken on the way home in 22 years and is also the background image of my WeChat Moments. I really like this kind of photo that can smell the fireworks of the city, which makes people feel that everything is fine in a peaceful life.

I have always wanted to write my own weekly magazine to share my observations and experiences. It is only now that I am officially starting. This is the first article, and just like life, I define it as: a new beginning.

Articles#

Videos#

Impressions#

This week, I had a whole new experience with ChatGPT. It can easily help a non-professional person create a complete work.

Case: As an ordinary person who doesn't understand code development, I want to implement a function: add a watermark to an image in the local browser, and the watermark can adjust the color, transparency, and tilt angle, and can be previewed in real time.

Source code:

<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>Image Watermark Tool</title>
<style>
  body {
    font-family: Arial, sans-serif;
    margin: 20px;
  }

  #imageCanvas {
    border: 1px solid #ddd;
    max-width: 500px; /* Maximum width limit */
    max-height: 500px; /* Maximum height limit */
  }

  div {
    margin-top: 20px;
  }
</style>
</head>
<body>
    <h2>Image Watermark Tool</h2>
    <input type="file" id="imageInput" accept="image/*" />
    <br>
    <canvas id="imageCanvas"></canvas>
    <br>
    <div>
        <label>Watermark Text: <input type="text" id="watermarkText" /></label>
        <label>Color: <input type="color" id="watermarkColor" /></label>
        <label>Opacity: <input type="range" id="watermarkOpacity" min="0" max="1" step="0.1" value="1" /></label>
        <label>Angle: <input type="range" id="watermarkAngle" min="0" max="360" value="0" /></label>
        <button id="applyWatermark">Apply Watermark</button>
    </div>
    <script>
      const imageInput = document.getElementById('imageInput');
      const imageCanvas = document.getElementById('imageCanvas');
      const ctx = imageCanvas.getContext('2d');
      let uploadedImage = null;

      // Process when selecting an image
      imageInput.addEventListener('change', function (e) {
        const file = e.target.files[0];
        const reader = new FileReader();
        reader.onload = function (event) {
          const img = new Image();
          img.onload = function () {
            const scale = Math.min(500 / img.width, 500 / img.height);
            const width = img.width * scale;
            const height = img.height * scale;
            imageCanvas.width = width;
            imageCanvas.height = height;
            ctx.drawImage(img, 0, 0, width, height);
            uploadedImage = img;
          }
          img.src = event.target.result;
        }
        reader.readAsDataURL(file);
      });

      // Apply watermark
      document.getElementById('applyWatermark').addEventListener('click', function () {
        if (!uploadedImage) return;

        ctx.clearRect(0, 0, imageCanvas.width, imageCanvas.height);
        const scale = Math.min(500 / uploadedImage.width, 500 / uploadedImage.height);
        const width = uploadedImage.width * scale;
        const height = uploadedImage.height * scale;
        ctx.drawImage(uploadedImage, 0, 0, width, height);

        const text = document.getElementById('watermarkText').value;
        const color = document.getElementById('watermarkColor').value;
        const opacity = document.getElementById('watermarkOpacity').value;
        const angle = document.getElementById('watermarkAngle').value;

        ctx.save();

        ctx.globalAlpha = opacity;
        ctx.fillStyle = color;
        ctx.font = "30px Arial";
        ctx.translate(imageCanvas.width / 2, imageCanvas.height / 2);
        ctx.rotate(angle * Math.PI / 180);

        // Draw multiple lines of watermark
        const lineHeight = 40; // Line height
        const lines = text.split('\n'); // Split text based on line breaks
        for (let i = 0; i < lines.length; i++) {
          ctx.fillText(lines[i], -ctx.measureText(lines[i]).width / 2, i * lineHeight);
        }

        ctx.restore();
      });
    </script>
</body>
</html>