js实现图片选中效果

实现图片选中效果的方法

使用CSS类切换实现选中效果

通过为图片添加点击事件监听器，动态切换CSS类来实现选中效果。选中时可以添加边框、阴影等样式。

document.querySelectorAll('.image-item').forEach(img => {
  img.addEventListener('click', function() {
    this.classList.toggle('selected');
  });
});

对应的CSS样式：

.selected {
  border: 3px solid #4285f4;
  box-shadow: 0 0 10px rgba(66, 133, 244, 0.5);
}

使用复选框实现多选

在每张图片上叠加一个复选框，通过控制复选框状态实现选中效果。

const checkboxes = document.querySelectorAll('.image-checkbox');
checkboxes.forEach(checkbox => {
  checkbox.addEventListener('change', function() {
    const img = this.closest('.image-container').querySelector('img');
    img.classList.toggle('selected', this.checked);
  });
});

HTML结构示例：

<div class="image-container">
  <input type="checkbox" class="image-checkbox">
  <img src="image.jpg" class="image-item">
</div>

使用Canvas绘制选中框

对于需要更复杂选中效果的情况，可以使用Canvas在图片上绘制选中框。

const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
const img = new Image();

img.onload = function() {
  canvas.width = img.width;
  canvas.height = img.height;
  ctx.drawImage(img, 0, 0);

  canvas.addEventListener('click', function(e) {
    const rect = canvas.getBoundingClientRect();
    const x = e.clientX - rect.left;
    const y = e.clientY - rect.top;

    // 清除之前的选择
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    ctx.drawImage(img, 0, 0);

    // 绘制新的选择框
    ctx.strokeStyle = '#FF0000';
    ctx.lineWidth = 2;
    ctx.strokeRect(x - 50, y - 50, 100, 100);
  });
};

img.src = 'image.jpg';

使用第三方库实现高级效果

对于更复杂的图片选择需求，可以考虑使用第三方库如Fabric.js或Interact.js。

Fabric.js示例：

const canvas = new fabric.Canvas('canvas');
fabric.Image.fromURL('image.jpg', function(img) {
  canvas.add(img);

  canvas.on('mouse:down', function(options) {
    if (options.target) {
      options.target.set({
        borderColor: 'red',
        cornerColor: 'green',
        cornerSize: 12,
        transparentCorners: false
      });
      canvas.renderAll();
    }
  });
});

响应式图片选择组件

创建一个可复用的图片选择组件，支持单选和多选模式。

class ImageSelector {
  constructor(containerId, options = {}) {
    this.container = document.getElementById(containerId);
    this.multiSelect = options.multiSelect || false;
    this.selectedImages = new Set();
    this.init();
  }

  init() {
    this.container.querySelectorAll('img').forEach(img => {
      img.addEventListener('click', () => this.toggleSelection(img));
    });
  }

  toggleSelection(img) {
    if (!this.multiSelect) {
      this.selectedImages.forEach(selected => {
        selected.classList.remove('selected');
      });
      this.selectedImages.clear();
    }

    img.classList.toggle('selected');
    if (img.classList.contains('selected')) {
      this.selectedImages.add(img);
    } else {
      this.selectedImages.delete(img);
    }
  }

  getSelected() {
    return Array.from(this.selectedImages);
  }
}

使用示例：

const selector = new ImageSelector('gallery-container', {
  multiSelect: true
});