javascript - 云函数: Crop image > Resize to multiple sizes

标签 javascript firebase imagemagick google-cloud-functions

当图像上传到我的 Firebase 存储时,我开始使用 Cloud Functions for Firebase 来裁剪和调整多个尺寸。我使用 Firebase 示例代码来开始。使用 ImageMagick 命令。但是,我没有让裁剪发挥作用。

我的目标是获得功能,就像 Wordpress 一样。上传图片x。进行固定比例裁剪。并将大小调整为 3 种尺寸。

我现在的代码调整为中型和大图像并将它们上传到我的存储中。有人知道如何让裁剪发挥作用吗?

这是我到目前为止的代码:

'use strict';

const functions = require(`firebase-functions`);
const mkdirp = require(`mkdirp-promise`);
const gcs = require(`@google-cloud/storage`)();
const spawn = require(`child-process-promise`).spawn;
const LOCAL_TMP_FOLDER = `/tmp/`;

// Thumbnail prefix added to file names.
const THUMB_PREFIX_LARGE = `large_`;
const THUMB_PREFIX_MEDIUM = `medium_`;

/**
 * When an image is uploaded in the Storage bucket We generate a thumbnail automatically using
 * ImageMagick.
 */
exports.generateThumbnail = functions.storage.object().onChange(event => {
  const filePath = event.data.name;
  const filePathSplit = filePath.split(`/`);
  const fileName = filePathSplit.pop();
  const fileDir = filePathSplit.join(`/`) + (filePathSplit.length > 0 ? `/` : ``);

  const thumbFilePathLarge = `${fileDir}${THUMB_PREFIX_LARGE}${fileName}`;
  const thumbFilePathMedium = `${fileDir}${THUMB_PREFIX_MEDIUM}${fileName}`;

  const tempLocalDir = `${LOCAL_TMP_FOLDER}${fileDir}`;
  const tempLocalFile = `${tempLocalDir}${fileName}`;

  const tempLocalThumbFileLarge = `${LOCAL_TMP_FOLDER}${thumbFilePathLarge}`;
  const tempLocalThumbFileMedium = `${LOCAL_TMP_FOLDER}${thumbFilePathMedium}`;

  // Exit if this is triggered on a file that is not an image.
  if (!event.data.contentType.startsWith(`image/`)) {
    console.log(`This is not an image.`);
    return;
  }

  // Exit if the image is already a thumbnail.
  if (fileName.startsWith(THUMB_PREFIX_LARGE) || fileName.startsWith(THUMB_PREFIX_MEDIUM)) {
    console.log(`Already a Thumbnail.`);
    return;
  }

  // Exit if this is a move or deletion event.
  if (event.data.resourceState === `not_exists`) {
    console.log(`This is a deletion event.`);
    return;
  }

  // Create the temp directory where the storage file will be downloaded.
  return mkdirp(tempLocalDir).then(() => {
    // Download file from bucket.
    const bucket = gcs.bucket(event.data.bucket);
    return bucket.file(filePath).download({
      destination: tempLocalFile
    }).then(() => {
      console.log(`The file has been downloaded to`, tempLocalFile);
      // Generate a LARGE thumbnail using ImageMagick.
      return spawn(`convert`, [tempLocalFile, `-thumbnail`, `1200x800`, tempLocalThumbFileLarge]).then(() => {
        console.log(`Thumbnail created at`, tempLocalThumbFileLarge);
        // Uploading the large Thumbnail.
        return bucket.upload(tempLocalThumbFileLarge, {
          destination: thumbFilePathLarge
        }).then(() => {
          console.log(`Thumbnail uploaded to Storage at`, thumbFilePathLarge);
        }).then(() => {
          console.log(`The file has been downloaded to`, tempLocalFile);
          // Generate a MEDIUM thumbnail using ImageMagick.
          return spawn(`convert`, [tempLocalFile, `-thumbnail`, `600x400`, tempLocalThumbFileMedium]).then(() => {
            console.log(`Thumbnail created at`, tempLocalThumbFileMedium);
            // Uploading the medium Thumbnail.
            return bucket.upload(tempLocalThumbFileMedium, {
              destination: thumbFilePathMedium
            }).then(() => {
              console.log(`Thumbnail uploaded to Storage at`, thumbFilePathMedium);
            });
          });
        });
      });
    });
  });
});

最佳答案

我这样做修复了它。

return mkdirp(tempLocalDir).then(() => {
    const bucket = gcs.bucket(event.data.bucket);
    return bucket.file(filePath).download({
      destination: tempLocalFile
    }).then(() => {
      return spawn(`convert`, [`-define`, `jpeg:size=1200x800`, tempLocalFile, `-thumbnail`, `1200x800^`, `-gravity`, `center`, `-extent`, `1200x800`, tempLocalThumbFileLarge]).then(() => {
        return bucket.upload(tempLocalThumbFileLarge, {
          destination: thumbFilePathLarge
        }).then(() => {
          return spawn(`convert`, [`-define`, `jpeg:size=600x400`, tempLocalFile, `-thumbnail`, `600x400^`, `-gravity`, `center`, `-extent`, `600x400`, tempLocalThumbFileMedium]).then(() => {
            return bucket.upload(tempLocalThumbFileMedium, {
              destination: thumbFilePathMedium
            });
          });
        });
      });
    });
  });

关于javascript - 云函数: Crop image > Resize to multiple sizes,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43767198/

相关文章:

.net - 将透明 png 图像转换为位图时,它不保留透明度?

javascript - 在 JointJs 中,如何在类似于 3ds max 创建图的元素之间建立链接?

卸载应用程序时 Firebase 删除用户

javascript - 在 Visual Studio 下编译时找不到模块

java - addChildEventListener (Firebase) 中的数组问题

Firebase 给出 "maxretry"错误

java - 创建 Dicom 图像

perl - 如何使用 PerlMagick 提取 EXIF 数据?

javascript - 如何在 react 异步调用后测试状态更新和组件重新渲染

javascript - 边框触摸按钮 :active applying but not firing event