通过Canvas及File API缩放并上传图片完整示例

通过Canvas及File API缩放并上传图片，是一种常见的前端图片处理技巧。下面是一个完整的示例攻略，帮助读者更好的理解。

1. 准备工作

在开始之前，我们需要准备以下内容：

1. 页面上需要有一个input[type="file"]元素；
2. 页面上需要一个canvas元素，用来展示缩放后的图片；
3. 服务器端需要支持接收图片数据和保存图片。

2. 获取图片并进行缩放

代码示例：

const inputFile = document.querySelector('input[type="file"]');
const canvas = document.querySelector('canvas');
const context = canvas.getContext('2d');
const reader = new FileReader();

// 监听input[type="file"]元素的change事件
inputFile.addEventListener('change', event => {
  const file = event.target.files[0];

  // 读取文件内容
  reader.readAsDataURL(file);
});

// 监听文件读取完毕事件
reader.addEventListener('load', event => {
  const image = new Image();

  // 加载图片
  image.src = event.target.result;

  // 监听图片加载完毕事件
  image.addEventListener('load', () => {
    // 清空canvas内容
    context.clearRect(0, 0, canvas.width, canvas.height);

    // 计算缩放后的尺寸
    let width = image.width / 2;
    let height = image.height / 2;

    // 将图片绘制到canvas中，并进行缩放
    context.drawImage(image, 0, 0, width, height);

    // 将缩放后的图片上传到服务器
    upload(canvas.toDataURL("image/jpeg"));
  });
});

// 上传图片
function upload(dataUrl) {
  const xhr = new XMLHttpRequest();
  xhr.open('POST', '/upload', true);
  xhr.send(dataUrl);
}

这段代码实现了：

1. 监听input[type="file"]元素的change事件，并在文件选中后读取文件内容；
2. 将文件内容转换成Image对象，并加入页面中以获得图片的尺寸；
3. 根据图片的尺寸计算出缩放后的尺寸；
4. 将缩放后的图片绘制到canvas中；
5. 将缩放后的图片上传到服务器。

3. 多张图片上传

上述代码实现了单张图片的上传，但如何处理多张图片上传呢？示例代码如下：

const inputFile = document.querySelector('input[type="file"]');
const canvas = document.querySelector('canvas');
const context = canvas.getContext('2d');
const reader = new FileReader();

// 监听input[type="file"]元素的change事件
inputFile.addEventListener('change', event => {
  const files = event.target.files;
  const imageCount = files.length;
  let uploadedCount = 0;

  Array.from(files).forEach((file, index) => {
    // 读取文件内容
    reader.readAsDataURL(file);

    // 监听文件读取完毕事件
    reader.addEventListener('load', event => {
      const image = new Image();

      // 加载图片
      image.src = event.target.result;

      // 监听图片加载完毕事件
      image.addEventListener('load', () => {
        // 清空canvas内容
        context.clearRect(0, 0, canvas.width, canvas.height);

        // 计算缩放后的尺寸
        let width = image.width / 2;
        let height = image.height / 2;

        // 将图片绘制到canvas中，并进行缩放
        context.drawImage(image, 0, 0, width, height);

        // 将缩放后的图片上传到服务器
        upload(canvas.toDataURL("image/jpeg"));

        uploadedCount++;

        // 所有图片都上传完毕，执行回调函数
        if (uploadedCount === imageCount) {
          callback();
        }
      });
    });
  });
});

// 上传图片
function upload(dataUrl) {
  const xhr = new XMLHttpRequest();
  xhr.open('POST', '/upload', true);
  xhr.send(dataUrl);
}

// 所有图片上传完毕，执行回调函数
function callback() {
  console.log('所有图片上传完毕');
}

这段代码中：

1. 在监听input[type="file"]元素的change事件时，将选中的多个文件分别进行处理；
2. 在图片上传过程中维护一个uploadedCount变量，当uploadedCount等于imageCount时，说明所有图片都已经上传完毕；
3. 所有图片上传完毕后，执行回调函数。