Поворачивайте, сжимайте и загружайте фотографии, сделанные H5 и апплетом

внешний интерфейс JavaScript Vue.js Ajax

Оригинальный адрес:GitHub.com/I также Inc/blog/…

Недавно поступил запрос на «размещение комментария»: пользователь может ввести комментарий и может сделать фото или выбрать картинку из альбома для загрузки, то есть поддерживать графические комментарии. Это нужно реализовать и на H5 и на апплете одновременно.Мест для обработки картинок много.В этой статье сделан краткий обзор практики обработки картинок на стороне H5. Код проекта основан на фреймворке Vue.Чтобы избежать влияния фреймворка, я изменил весь код на реализацию нативного API для объяснения.В то же время в фреймворке есть много других дополнительных деталей и функций. код проекта (предварительный просмотр, обрезка, ход загрузки и т. д.) Он опущен, и представлены только ключевые идеи и коды, связанные с обработкой изображений. Реализация апплета аналогична H5 и повторяться не будет Код реализации апплета прилагается в конце статьи.

Фотография

использовать<input>Этикетка,typeустановить как"file"Выберите файл,acceptустановить как"image/*"Выберите файл в качестве типа изображения и снимка камеры, установитеmultipleПоддерживается множественный выбор. мониторchangeСобытие получает список выбранных файлов, каждый файл являетсяBlobТипы.

  <input type="file" accept="image/*" multiple />  
  <img class="preivew" />
  <script type="text/javascript">
    function onFileChange (event) {
      const files = Array.prototype.slice.call(event.target.files)
      files.forEach(file => console.log('file name:', file.name))
    }
    document.querySelector('input').addEventListener('change', onFileChange)
  </script>

Примечание. Если вы непрерывно выбираете тот же файл, файл не вызывает второе выборовchangeсобытие, потому чтоvalueЗначение не изменилось, а<input>изchangeтолько событиеvalueЗапускается при изменении. Обходной путь: сброс после обработки файла в обработчике событий изменения.valueзначение по умолчанию"", как только значение value будет сброшено,filesЗначение также автоматически сбрасывается одновременно. (благодарный@1 борющаяся тихая травауказан комментарий)

Предварительный просмотр изображения

URL.createObjectURLМетод может создать локальный URL-адрес, указывающий на локальный объект ресурса.Следующее использует этот интерфейс для создания адреса выбранного изображения и его отображения.

    function onFileChange (event) {
      const files = Array.prototype.slice.call(event.target.files)

      const file = files[0]
      document.querySelector('img').src = window.URL.createObjectURL(file)
    }

Поворот изображения

Снимки, сделанные камерой, могут быть повернуты из-за ориентации камеры при съемке, что необходимо исправить. Исправление поворота требует знания информации о повороте изображения, вот метод, называемыйexif-jsБиблиотека может считывать метаданные EXIF ​​изображения, в том числе ориентацию камеры при съемке, и информацию о повороте изображения можно вычислить в соответствии с этой ориентацией.

Ниже приведены флаги вращения EXIF, всего их 8 типов, но при съемке через камеру могут генерироваться только 1, 3, 6 и 8, что соответствует обычной камере, вращение на 180° по часовой стрелке, 90° против часовой стрелки. вращение и вращение по часовой стрелке Фотографии сделаны под углом 90°.

Таким образом, чтобы исправить угол поворота изображения, просто прочитайте флаг поворота EXIF ​​​​изображения, оцените угол поворота, поверните изображение на холсте и повторно экспортируйте новое изображение. Среди них операция поворота холста может относиться кПоворот изображения на холсте и разблокировка флип-позыЭта статья. Следующая функция выполняет коррекцию угла поворота файла изображения, получает файл изображения и возвращает исправленный новый файл изображения.

/**
 * 修正图片旋转角度问题
 * @param {file} 原图片
 * @return {Promise} resolved promise 返回纠正后的新图片
 */
function fixImageOrientation (file) {
  return new Promise((resolve, reject) => {
    // 获取图片
    const img = new Image();
    img.src = window.URL.createObjectURL(file);
    img.onerror = () => resolve(file);
    img.onload = () => {
      // 获取图片元数据（EXIF 变量是引入的 exif-js 库暴露的全局变量）
      EXIF.getData(img, function() {
        // 获取图片旋转标志位
        var orientation = EXIF.getTag(this, "Orientation");
        // 根据旋转角度，在画布上对图片进行旋转
        if (orientation === 3 || orientation === 6 || orientation === 8) {
          const canvas = document.createElement("canvas");
          const ctx = canvas.getContext("2d");
          switch (orientation) {
            case 3: // 旋转180°
              canvas.width = img.width;
              canvas.height = img.height;
              ctx.rotate((180 * Math.PI) / 180);
              ctx.drawImage(img, -img.width, -img.height, img.width, img.height);
              break;
            case 6: // 旋转90°
              canvas.width = img.height;
              canvas.height = img.width;
              ctx.rotate((90 * Math.PI) / 180);
              ctx.drawImage(img, 0, -img.height, img.width, img.height);
              break;
            case 8: // 旋转-90°
              canvas.width = img.height;
              canvas.height = img.width;
              ctx.rotate((-90 * Math.PI) / 180);
              ctx.drawImage(img, -img.width, 0, img.width, img.height);
              break;
          }
          // 返回新图片
          canvas.toBlob(file => resolve(file), 'image/jpeg', 0.92)
        } else {
          return resolve(file);
        }
      });
    };
  });
}

Сжатие изображения

В настоящее время эффект камеры мобильных телефонов становится все лучше и лучше, и следующее увеличение размера изображения.Это может быть несколько МБ или даже десяток МБ на каждом шагу.Прямая загрузка исходного изображения происходит медленно и легко загрузить сбой, а фон также имеет ограничения на размер тела запроса. , последующая загрузка отображения изображения также будет медленнее. Если интерфейс сжимает изображение и загружает его, эти проблемы можно решить.

Следующая функция реализует сжатие изображения.Принцип заключается в том, чтобы нарисовать увеличенное изображение на холсте и, наконец, экспортировать сжатое изображение с холста. В методе есть два места для управления сжатием изображения: одно — для управления коэффициентом масштабирования изображения, другое — для управления качеством экспортируемого изображения.

/**
 * 压缩图片
 * @param {file} 输入图片
 * @returns {Promise} resolved promise 返回压缩后的新图片
 */
function compressImage(file) {
  return new Promise((resolve, reject) => {
    // 获取图片（加载图片是为了获取图片的宽高）
    const img = new Image();
    img.src = window.URL.createObjectURL(file);
    img.onerror = error => reject(error);
    img.onload = () => {
      // 画布宽高
      const canvasWidth = document.documentElement.clientWidth * window.devicePixelRatio;
      const canvasHeight = document.documentElement.clientHeight * window.devicePixelRatio;

      // 计算缩放因子
      // 这里我取水平和垂直方向缩放因子较大的作为缩放因子，这样可以保证图片内容全部可见
      const scaleX = canvasWidth / img.width;
      const scaleY = canvasHeight / img.height;
      const scale = Math.min(scaleX, scaleY);

      // 将原始图片按缩放因子缩放后，绘制到画布上
      const canvas = document.createElement('canvas');
      const ctx = canvas.getContext("2d");
      canvas.width = canvasWidth;
      canvas.height = canvasHeight;
      const imageWidth = img.width * scale;
      const imageHeight = img.height * scale;
      const dx = (canvasWidth - imageWidth) / 2;
      const dy = (canvasHeight - imageHeight) / 2;
      ctx.drawImage(img, dx, dy, imageWidth, imageHeight);
      // 导出新图片
      // 指定图片 MIME 类型为 'image/jpeg', 通过 quality 控制导出的图片质量，进行实现图片的压缩
      const quality = 0.92
      canvas.toBlob(file => resolve(file), "image/jpeg", quality);
    };
  });
},

загрузить изображение

пройти черезFormDataСоздать данные формы, инициировать ajaxPOSTПросто запросите, следующая функция реализует загрузку файлов.

Примечание: ОтправитьFormDataданные, браузер автоматически устанавливаетContent-Typeявляется подходящим значением, нет необходимости устанавливатьContent-Type, в противном случае будет сообщено об ошибке, поскольку граница разделителя тела HTTP-запроса создается браузером и не может быть установлена ​​вручную.

/**
 * 上传文件
 * @param {File} file 待上传文件
 * @returns {Promise} 上传成功返回 resolved promise，否则返回 rejected promise
 */
function uploadFile (file) {
  return new Promise((resolve, reject) => {
    // 准备表单数据
    const formData = new FormData()
    formData.append('file', file)

    // 提交请求
    const xhr = new XMLHttpRequest()
    xhr.open('POST', uploadUrl)
    xhr.onreadystatechange = function () {
      if (this.readyState === XMLHttpRequest.DONE && this.status === 200) {
        resolve(JSON.parse(this.responseText))
      } else {
        reject(this.responseText)
      }
    }
    xhr.send(formData)
  })
}

резюме

С вышеперечисленными вспомогательными функциями обрабатывать намного проще, и окончательный код вызова выглядит следующим образом:

function onFileChange (event) {
  const files = Array.prototype.slice.call(event.target.files)

  const file = files[0]
  // 修正图片旋转
  fixImageOrientation(file).then(file2 => {
    // 创建预览图片
    document.querySelector('img').src = window.URL.createObjectURL(file2)
    // 压缩
    return compressImage(file2)
  }).then(file3 => {
    // 更新预览图片
    document.querySelector('img').src = window.URL.createObjectURL(file3)
    // 上传
    return uploadFile(file3)
  }).then(data => {
    console.log('上传成功')
  }).catch(error => {
    console.error('上传失败')
  })
}

H5 предоставляет интерфейс для обработки файлов.С помощью canvas можно реализовать сложную обработку изображений в браузере.В данной статье обобщены некоторые приемы обработки изображений в сценарии загрузки изображений на мобильный терминал H5.Его можно использовать как частичный ссылка при возникновении подобных потребностей в будущем.

Прикрепленный справочник по реализации апплета

// 拍照
wx.chooseImage({
  sourceType: ["camera"],
  success: ({ tempFiles }) => {
    const file = tempFiles[0]
    // 处理图片
  }
});

/**
 * 压缩图片
 * @param {Object} params
 * filePath: String 输入的图片路径
 * success: Function 压缩成功时回调，并返回压缩后的新图片路径
 * fail: Function 压缩失败时回调
 */
compressImage({ filePath, success, fail }) {
  // 获取图片宽高
  wx.getImageInfo({
    src: filePath,
    success: ({ width, height }) => {
      const systemInfo = wx.getSystemInfoSync();
      const canvasWidth = systemInfo.screenWidth;
      const canvasHeight = systemInfo.screenHeight;
      // 更新画布尺寸
      this.setData({ canvasWidth, canvasHeight })

      // 计算缩放比例
      const scaleX = canvasWidth / width;
      const scaleY = canvasHeight / height;
      const scale = Math.min(scaleX, scaleY);
      const imageWidth = width * scale;
      const imageHeight = height * scale;

      // 将缩放后的图片绘制到画布
      const ctx = wx.createCanvasContext("hidden-canvas");
      let dx = (canvasWidth - imageWidth) / 2;
      let dy = (canvasHeight - imageHeight) / 2;
      ctx.drawImage(filePath, dx, dy, imageWidth, imageHeight);
      ctx.draw(false, () => {
        // 导出压缩后的图片到临时文件
        wx.canvasToTempFilePath({
          canvasId: "hidden-canvas",
          width: canvasWidth,
          height: canvasHeight,
          destWidth: canvasWidth,
          destHeight: canvasHeight,
          fileType: "jpg",
          quality: 0.92,
          success: ({ tempFilePath }) => {
            // 隐藏画布
            this.setData({ canvasWidth: 0, canvasHeight: 0 })

            // 压缩完成
            success({ tempFilePath });
          },
          fail: error => {
            // 隐藏画布
            this.setData({ canvasWidth: 0, canvasHeight: 0 })
            fail(error);
          }
        });
      });
    },
    fail: error => {
      fail(error);
    }
  });
}


/**
 * 上传文件
 */
uploadFile({ uploadUrl, filePath, onData, onError }) {
  wx.uploadFile({
    url: uploadUrl
    filePath: filePath,
    name: "file",
    header: {
      Cookie: cookie
    },
    success: res => {
      if (res.statusCode === 200) {
        onData(res.data)
      } else {
        onError(res);
      }
    },
    fail: error => {
      onError(error);
    }
  });
}
Категории