当图像上传到我的 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/