实现多张图片合成一张的效果

前端实现多张图片合成一张图片，有多种方法，以下是几种常见方案以及代码示例：

1. 使用 Canvas API:

这是最常用的方法，灵活度高，可以实现各种复杂的合成效果。

function mergeImages(imageUrls, callback) {
  const canvas = document.createElement('canvas');
  const ctx = canvas.getContext('2d');
  const images = [];

  let loadedImages = 0;

  // 设置canvas大小，可以根据需求调整
  canvas.width = 1000; // 例如1000px
  canvas.height = 800; // 例如800px

  imageUrls.forEach(url => {
    const img = new Image();
    img.crossOrigin = "anonymous"; // 重要：处理跨域图片
    img.onload = () => {
      images.push(img);
      loadedImages++;
      if (loadedImages === imageUrls.length) {
        drawImages();
      }
    };
    img.onerror = (error) => {
      console.error("图片加载失败:", url, error);
      // 处理图片加载失败的情况，例如使用默认图片或跳过
      loadedImages++;
      if (loadedImages === imageUrls.length) {
        drawImages();
      }
    };
    img.src = url;
  });


  function drawImages() {
    images.forEach((img, index) => {
      // 根据需求调整每张图片的位置和大小
      // 例如：平铺排列
      const x = (index % 3) * (canvas.width / 3); // 三列
      const y = Math.floor(index / 3) * (canvas.height / 2); // 两行
      const width = canvas.width / 3;
      const height = canvas.height / 2;

      ctx.drawImage(img, x, y, width, height);


      // 其他排列方式，例如：叠加
      // ctx.drawImage(img, 0, 0, canvas.width, canvas.height);

    });

    // 将canvas转换为DataURL
    const dataURL = canvas.toDataURL('image/png');
    callback(dataURL);
  }
}


// 使用示例
const imageUrls = [
  'image1.jpg',
  'image2.png',
  'image3.gif',
  'image4.jpg',
  'image5.png',
  'image6.gif'
];

mergeImages(imageUrls, (dataURL) => {
  const img = document.createElement('img');
  img.src = dataURL;
  document.body.appendChild(img);
});

2. 使用 CSS background:

如果只是简单的叠加效果，可以使用 CSS background 属性和 background-image，background-position 等属性来实现。

.merged-image {
  width: 500px;
  height: 300px;
  background-image: url('image1.jpg'), url('image2.png'), url('image3.gif');
  background-position: top left, center, bottom right;
  background-repeat: no-repeat;
  background-size: contain; /* 或其他值，例如 cover, 100px 100px */
}