js代码怎么实现合并图片

在JavaScript中，合并图片通常涉及到创建一个canvas元素，然后使用drawImage方法将图片绘制到canvas上，最后将canvas转换为图片格式，如PNG或JPEG。以下是一个简单的实现示例：

function mergeImages(imageUrls, callback) {
  const canvas = document.createElement('canvas');
  const ctx = canvas.getContext('2d');
  const images = imageUrls.map(url => new Image());
 
  let loadedImages = 0;
 
  images.forEach((image, index) => {
    image.src = imageUrls[index];
    image.onload = () => {
      if (++loadedImages === images.length) {
        // 所有图片都加载完毕后，计算合并后的图片尺寸
        let width = 0;
        let height = 0;
        images.forEach(img => {
          width += img.width;
          height = Math.max(height, img.height);
        });
 
        canvas.width = width;
        canvas.height = height;
 
        let offsetX = 0;
        images.forEach((img, index) => {
          const x = offsetX;
          const y = height - img.height;
          ctx.drawImage(img, x, y, img.width, img.height);
          offsetX += img.width;
        });
 
        // 转换canvas为DataURL格式的图片
        const dataURL = canvas.toDataURL('image/png');
        callback(dataURL);
      }
    };
  });
}
 
// 使用示例
const imageUrls = ['image1.png', 'image2.png']; // 图片链接列表
mergeImages(imageUrls, dataURL => {
  // 创建一个Image元素来展示合并后的图片
  const img = document.createElement('img');
  img.src = dataURL;
  document.body.appendChild(img);
});

在这个例子中，mergeImages函数接收一个图片链接数组和一个回调函数。图片会按顺序加载，并逐一绘制到canvas上。所有图片加载完毕后，canvas会转换为DataURL格式的图片，并通过回调函数返回。在实际应用中，你可能需要处理错误和异步加载等问题，但基本的合并图片逻辑就是这样。