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

Giới thiệu

Đây là công cụ ghép logo vào ảnh, mọi người có thể xem Demo tại đây

CSS

Đây là CSS cơ bản, mọi người tùy chỉnh cho phù hợp với website của mình

.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);
        });
      }
    });