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

8.8.23 | 9 nhận xét | lượt xem
Nội Dung Chính [Ẩn] [Hiển thị]
    Yêu cầu

    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
    ghép logo

    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);
            });
          }
        });
    Bạn đang xem bài viết "Hướng dẫn thêm công cụ ghép logo vào ảnh cho website" tại chuyên mục: Yêu Cầu

      9

      nhận xét
      Mới nhất ⇅

      Chèn hình ảnh: Chỉ cần dán link hình ảnh - Upload ảnh

      Chèn code: [pre]Code đã mã hóa [/pre]

      Chèn emoji: Nhấn tổ hợp phím “Windows + . (dấu chấm)”

      Chèn link: Click để chèn link