云端功能：剪裁图片>调整到多个尺寸 [英] Cloud Function: Crop image > Resize to multiple sizes
本文介绍了云端功能：剪裁图片>调整到多个尺寸的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
这是我的目标是获得功能，就像Wordpress一样。上传图片x。做一个固定的比例作物。并调整到3个大小。
我现在的代码已经调整为大中型图片并上传到我的存储中。任何人都有如何获得作物的方法？
这是我的代码到目前为止：
'use strict';
const函数= 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 /`;
//将缩略图前缀添加到文件名中。
const THUMB_PREFIX_LARGE =`large_`;
const THUMB_PREFIX_MEDIUM =`medium_`;
/ **
*图像上传到存储桶时我们使用
* 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？`/`： `）;
$ b $常量thumbFilePathLarge =`$ {fileDir} $ {THUMB_PREFIX_LARGE} $ {fileName}`;
const thumbFilePathMedium =`$ {fileDir} $ {THUMB_PREFIX_MEDIUM} $ {fileName} ;
$ b $ const tempLocalDir =`$ {LOCAL_TMP_FOLDER} $ {fileDir}`;
const tempLocalFile =`$ {tempLocalDir} $ {fileName}`;
const tempLocalThumbFileLarge =`$ {LOCAL_TMP_FOLDER} $ {thumbFilePathLarge}`;
const tempLocalThumbFileMedium =`$ {LOCAL_TMP_FOLDER} $ {thumbFilePathMedium}`;
如果在文件
if（！event.data.contentType.startsWith（`image /`））{
console.log（`This is a image.`）;
return ;
}
//如果图像已经是缩略图，则退出。
if（fileName.startsWith（THUMB_PREFIX_LARGE）|| fileName.startsWith（THUMB_PREFIX_MEDIUM））{
console.log（`已经是Thumbnail.`）;
return;
}
//如果这是一个移动或删除事件，请退出。
if（event.data.resourceState ===`not_exists`）{
console.log（`This is a delete event.`）;
return;
}
//创建下载存储文件的临时目录。
return mkdirp（tempLocalDir）.then（（）=> {
//从桶下载文件
const bucket = gcs.bucket（event.data.bucket）; $ b $ （filePath）.download（{
destination：tempLocalFile
}）。then（（）=> {
console.log（`文件已被下载到` ，tempLocalFile）;
//使用ImageMagick生成一个LARGE缩略图
return spawn（`convert`，[tempLocalFile，`-thumbnail`，`1200x800`，tempLocalThumbFileLarge]）。（（）=> ; {
console.log（``at`，tempLocalThumbFileLarge创建的缩略图）;
//上传大缩略图
return bucket.upload（tempLocalThumbFileLarge，{
destination：thumbFilePathLarge $ （（））=> {
console.log（`Thumbnail上传到Storage at，thumbFilePathLarge）;
}）。then（（）=> {
console.log（`文件已被下载到`，tempLocalFile）;
//生成一个ME使用ImageMagick的DIUM缩略图。
return spawn（`convert`，[tempLocalFile，`-thumbnail`，`600x400`，tempLocalThumbFileMedium]）。然后（（）=> {
console.log（'在'创建缩略图，tempLocalThumbFileMedium ）;
//上传介质缩略图
return bucket.upload（tempLocalThumbFileMedium，{
destination：thumbFilePathMedium
}）。then（（）=> {
console.log（`Thumbnail上传到Storage at，thumbFilePathMedium）;
}）;
}）;
}）;
}）;
}）;
}）;
}）;
解决方案
b
$ b
return mkdirp（tempLocalDir）.then（（）=> {
const bucket = gcs.bucket（event.data.bucket） ;
return bucket.file（filePath）.download（{
destination：tempLocalFile
}）。then（（）=> {
return spawn（`convert`，[ （（（（ - ），jpeg：size = 1200x800，tempLocalFile，`-thumbnail`，`1200x800 ^`，`-gravity`，`center`，`-extent`，`1200x800`，tempLocalThumbFileLarge]）。 ）=> {
return bucket.upload（tempLocalThumbFileLarge，{
destination：thumbFilePathLarge
}）。then（（）=> {
return spawn（`convert`， [`-define`，`jpeg：size = 600x400`，tempLocalFile，`-thumbnail`，`600x400 ^`，`-gravity`，`center`，`-extent`，`600x400`，tempLocalThumbFileMedium]）。 （）=> {
return bucket.upload（tempLocalThumbFileMedium，{
destination：thumbFilePathMedium
}）;
}）;
}）;
}）;
}）;
}）;
I've started using Cloud Functions for Firebase to crop and resize multiple sizes when an image gets uploaded to my Firebase storage. I used the Firebase example code to get me started. Using the ImageMagick commands. However, I'm not getting crop to work.
It's my goal to get functionality, the same way Wordpress does. Upload image x. Make a fixed ratio crop. And resize to 3 sizes.
The code I have now resizes to a medium and large image and uploads them into my storage. Anyone have an approach on how to get the crop working?
This is my code so far:
'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);
});
});
});
});
});
});
});
解决方案
I fixed it doing this.
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
});
});
});
});
});
});
这篇关于云端功能：剪裁图片>调整到多个尺寸的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
