Hướng dẫn thêm công cụ ghép logo vào ảnh cho website

Tết Pro tháng 8 08, 2023 4 min read

Giới thiệu

CSS

.optionlogo {
  border: 1px solid rgb(189, 193, 198);
  background: #dddfe2;
  padding: 10px;
  width: calc(100% - 10px);
  margin: 10px 0;
  height: 30px;
  clear: both;
  border-radius: 5px;
}
.optionlogo label {
  display: inline-block;
  width: 195px;
  font-size: 20px;
}
.slider-container {
  margin-left: auto;
  width: calc(100% - 200px);
  font-size: 20px;
  margin-top: -20px;
}
#logoInput, #imageInput {
  width: calc(100% - 200px);
  font-size: 20px;
}
#positionSelect {
  height: auto;
  background-color: #0075ff;
  font-family: inherit;
  border: 1px solid #3b75ba;
  color: #eeeeee;
  font-size: 18px;
  width: 200px;
  padding: 2px;
}
.slider {
  width: 100%;
}
.result-container {
  margin-top: 20px;
}
.result-image {
  display: block;
  margin-top: 10px;
  max-width: 100%;
}
.image-container {
  position: relative;
  display: inline-block;
  margin-right: 10px;
}

HTML

    <div class="optionlogo">
      <label for="logoInput">Chọn logo</label>
      <input type="file" id="logoInput" accept="image/*" required>
    </div>
    <div class="optionlogo">
      <label for="imageInput">Chọn ảnh nền</label>
      <input type="file" id="imageInput" accept="image/*" multiple required>
    </div>
    <div class="optionlogo">
      <label for="opacityRange">Độ mờ logo</label>
      <div class="slider-container">
        <input type="range" id="opacityRange" min="0" max="100" value="70" class="slider">
      </div>
    </div>
    <div class="optionlogo">
      <label for="sizeRatioRange">Kích thước logo</label>
      <div class="slider-container">
        <input type="range" id="sizeRatioRange" min="10" max="100" value="20" class="slider">
      </div>
    </div>
    <div class="optionlogo">
      <label for="borderRange">Cách viền</label>
      <div class="slider-container">
        <input type="range" id="borderRange" min="0" max="100" value="20" class="slider">
      </div>
    </div>
    <div class="optionlogo">
      <label for="positionSelect">Vị trí logo:</label>
      <select id="positionSelect">
        <option value="top-left">Góc trên trái</option>
        <option value="top">Trên</option>
        <option value="top-right">Góc trên phải</option>
        <option value="left">Trái</option>
        <option value="center">Chính giữa</option>
        <option value="right">Phải</option>
        <option value="bottom-left">Góc dưới trái</option>
        <option value="bottom">Dưới</option>
        <option value="bottom-right">Góc dưới phải</option>
      </select>
    </div>
    <div class="result-container" id="resultContainer"></div>

Javascript

document.addEventListener('DOMContentLoaded', function() {
      var logoInput = document.getElementById('logoInput');
      var imageInput = document.getElementById('imageInput');
      var opacityRange = document.getElementById('opacityRange');
      var sizeRatioRange = document.getElementById('sizeRatioRange');
      var borderRange = document.getElementById('borderRange');
      var positionSelect = document.getElementById('positionSelect');
      var resultContainer = document.getElementById('resultContainer');

      var logoImage;
      var backgroundImageList = [];

      logoInput.addEventListener('change', function(e) {
        var logoFile = e.target.files[0];
        var logoUrl = URL.createObjectURL(logoFile);
        logoImage = new Image();
        logoImage.src = logoUrl;
        updateResult();
      });

      imageInput.addEventListener('change', function(e) {
        var imageFiles = Array.from(e.target.files);
        var fileCount = Math.min(imageFiles.length, 10); // Tối đa 10 ảnh nền
        backgroundImageList = [];

        for (var i = 0; i < fileCount; i++) {
          var imageUrl = URL.createObjectURL(imageFiles[i]);
          var backgroundImage = new Image();
          backgroundImage.src = imageUrl;
          backgroundImage.onload = function() {
            updateResult();
          };
          backgroundImage.onerror = function() {
            backgroundImageList.splice(backgroundImageList.indexOf(this), 1);
            updateResult();
          };
          backgroundImageList.push(backgroundImage);
        }

        updateResult();
      });

      opacityRange.addEventListener('input', updateResult);
      sizeRatioRange.addEventListener('input', updateResult);
      borderRange.addEventListener('input', updateResult);
      positionSelect.addEventListener('change', updateResult);

      function updateResult() {
        if (!logoImage || backgroundImageList.length === 0) {
          resultContainer.innerHTML = '';
          return;
        }

        var opacity = opacityRange.value / 100;
        var border = borderRange.value;
        var position = positionSelect.value;

        resultContainer.innerHTML = '';

        backgroundImageList.forEach(function(backgroundImage) {
          var imageContainer = document.createElement('div');
          imageContainer.classList.add('image-container');

          var canvas = document.createElement('canvas');
          canvas.width = backgroundImage.width;
          canvas.height = backgroundImage.height;
          var ctx = canvas.getContext('2d');
          ctx.drawImage(backgroundImage, 0, 0);

          var logoWidth = canvas.width * sizeRatioRange.value / 100;
          var logoHeight = logoWidth / (logoImage.width / logoImage.height);

          var offsetX = 0;
          var offsetY = 0;

          switch (position) {
            case 'top-left':
              offsetX = border;
              offsetY = border;
              break;
            case 'top':
              offsetX = (canvas.width - logoWidth) / 2;
              offsetY = border;
              break;
            case 'top-right':
              offsetX = canvas.width - logoWidth - border;
              offsetY = border;
              break;
            case 'left':
              offsetX = border;
              offsetY = (canvas.height - logoHeight) / 2;
              break;
            case 'center':
              offsetX = (canvas.width - logoWidth) / 2;
              offsetY = (canvas.height - logoHeight) / 2;
              break;
            case 'right':
              offsetX = canvas.width - logoWidth - border;
              offsetY = (canvas.height - logoHeight) / 2;
              break;
            case 'bottom-left':
              offsetX = border;
              offsetY = canvas.height - logoHeight - border;
              break;
            case 'bottom':
              offsetX = (canvas.width - logoWidth) / 2;
              offsetY = canvas.height - logoHeight - border;
              break;
            case 'bottom-right':
              offsetX = canvas.width - logoWidth - border;
              offsetY = canvas.height - logoHeight - border;
              break;
          }

          ctx.globalAlpha = opacity;
          ctx.drawImage(logoImage, offsetX, offsetY, logoWidth, logoHeight);

          var resultImage = document.createElement('img');
          resultImage.classList.add('result-image');
          resultImage.src = canvas.toDataURL();
          imageContainer.appendChild(resultImage);

          resultContainer.appendChild(imageContainer);
        });
      }
    });