JavaScript图片处理与合成总结

当涉及到JavaScript图片处理与合成时，我们可以使用许多工具和库，但是本文将介绍如何使用原生JavaScript来完成这个任务。

步骤一：加载图片

首先，我们需要加载所有需要处理的图片。我们一般使用Image对象来完成这个任务。 在以下示例中，我们加载两个图片：

const image1 = new Image();
const image2 = new Image();

image1.src = 'path/to/image1.png';
image2.src = 'path/to/image2.png';

步骤二：等待图片加载完成

我们需要确保所有图片都成功加载完成，这可以通过监听load事件来完成。在以下示例中，我们使用Promise.all来等待两张图片都完成加载。

Promise.all([loadImage(image1), loadImage(image2)]).then(() => {
  // 所有图片加载完成
});

function loadImage(img) {
  return new Promise((resolve, reject) => {
    img.addEventListener('load', () => resolve(img));
    img.addEventListener('error', () => reject(new Error(`Failed to load image's URL: ${img.src}`)));
  });
}

步骤三：合成图片

一旦两个图片加载完成，我们需要将它们合成成一个新的图片。 首先，我们需要创建一个canvas元素。 然后，可以使用drawImage方法在画布上绘制我们的两张图片。

const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');

canvas.width = image1.width + image2.width;
canvas.height = Math.max(image1.height, image2.height);

ctx.drawImage(image1, 0, 0);
ctx.drawImage(image2, image1.width, 0);

在这个例子中，我们将第二个图片放在第一个图片的右侧。 我们还要确保画布的高度足够大，以容纳最大高度的任何一个图片。

步骤四：在网页上显示合成图片

最后，我们需要将canvas元素转换成一个图片元素，以在网页中显示合成的图片。 以下是将canvas转换成图片元素的代码：

const outputImage = new Image();

outputImage.src = canvas.toDataURL();
document.body.appendChild(outputImage);

在这个例子中，我们将图片插入页面的body元素中。 您可以更改这个代码，以便将图片插入其他元素中。

示例一

以下代码演示了如何合成三张图片，按照特定的顺序排列。

const images = [
  'path/to/image1.jpg',
  'path/to/image2.jpg',
  'path/to/image3.jpg',
];

const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');

const promises = images.map((src) => {
  const img = new Image();
  img.src = src;

  return loadImage(img);
});

Promise.all(promises).then((loadedImages) => {
  let xPos = 0;
  loadedImages.forEach((img) => {
    ctx.drawImage(img, xPos, 0);
    xPos += img.width;
  });

  canvas.width = xPos;
  canvas.height = loadedImages[0].height;

  const outputImage = new Image();
  outputImage.src = canvas.toDataURL();
  document.body.appendChild(outputImage);
});

function loadImage(img) {
  return new Promise((resolve, reject) => {
    img.addEventListener('load', () => resolve(img));
    img.addEventListener('error', () => reject(new Error(`Failed to load image's URL: ${img.src}`)));
  });
}

示例二

以下代码演示了如何将一张照片合成到一个带有透明度的矩形上，并将文本添加到画布。

const image = new Image();
image.src = 'path/to/image.jpg';

const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');

loadImage(image).then((loadedImage) => {
  canvas.width = loadedImage.width + 40;
  canvas.height = loadedImage.height + 100;

  // 绘制带有透明度的矩形
  ctx.fillStyle = 'rgba(0, 0, 0, 0.7)';
  ctx.fillRect(20, 20, loadedImage.width, loadedImage.height);

  // 绘制照片
  ctx.drawImage(loadedImage, 20, 20);

  // 添加文本
  ctx.font = 'bold 20px Arial';
  ctx.fillStyle = 'white';
  ctx.fillText('My Photo', 30, loadedImage.height + 50);

  const outputImage = new Image();
  outputImage.src = canvas.toDataURL();
  document.body.appendChild(outputImage);
});

function loadImage(img) {
  return new Promise((resolve, reject) => {
    img.addEventListener('load', () => resolve(img));
    img.addEventListener('error', () => reject(new Error(`Failed to load image's URL: ${img.src}`)));
  });
}

在这个例子中，我们将图片放在一个带有透明度的矩形中，并在照片的底部添加了一行文本。