云功能:调整大小后的图像无法加载 [英] Cloud Functions: Resized images not loading

问题描述

我正在遵循教程来通过Cloud调整图像大小上载功能时遇到两个我不知道的主要问题:

I am following a tutorial to resize images via Cloud Functions on upload and am experiencing two major issues which I can't figure out:

1)如果上传了PNG，它将生成正确大小的缩略图，但不会在Firestorage中加载它们的预览(加载"微调框将无限期显示).它仅在我单击生成新的访问令牌"后显示图像(最初生成的缩略图都没有访问令牌).

1) If a PNG is uploaded, it generates the correctly sized thumbnails, but the preview of them won't load in Firestorage (Loading spinner shows indefinitely). It only shows the image after I click on "Generate new access token" (none of the generated thumbnails have an access token initially).

2)如果上载JPEG或任何其他格式，则MIME类型显示为"application/octet-stream".我不确定如何正确提取扩展名以放入新生成的缩略图的文件名中?

2) If a JPEG or any other format is uploaded, the MIME type shows as "application/octet-stream". I'm not sure how to extract the extension correctly to put into the filename of the newly generated thumbnails?

export const generateThumbs = functions.storage
.object()
.onFinalize(async object => {
  const bucket = gcs.bucket(object.bucket);
  const filePath = object.name;
  const fileName = filePath.split('/').pop();
  const bucketDir = dirname(filePath);

  const workingDir = join(tmpdir(), 'thumbs');
  const tmpFilePath = join(workingDir, 'source.png');

  if (fileName.includes('thumb@') || !object.contentType.includes('image')) {
    console.log('exiting function');
    return false;
  }

  // 1. Ensure thumbnail dir exists
  await fs.ensureDir(workingDir);

 // 2. Download Source File
 await bucket.file(filePath).download({
   destination: tmpFilePath
 });

// 3. Resize the images and define an array of upload promises
 const sizes = [64, 128, 256];

 const uploadPromises = sizes.map(async size => {
  const thumbName = `thumb@${size}_${fileName}`;
  const thumbPath = join(workingDir, thumbName);

  // Resize source image
   await sharp(tmpFilePath)
    .resize(size, size)
    .toFile(thumbPath);

  // Upload to GCS
  return bucket.upload(thumbPath, {
    destination: join(bucketDir, thumbName)
  });
});

// 4. Run the upload operations
  await Promise.all(uploadPromises);

// 5. Cleanup remove the tmp/thumbs from the filesystem
  return fs.remove(workingDir);
  });

非常感谢您的反馈！

推荐答案

我只是遇到了同样的问题，原因不明的Firebase的调整大小图像"故意从调整大小后的图像中删除了下载令牌

I just had the same problem, for unknown reason Firebase's Resize Images on purposely remove the download token from the resized image

禁止删除下载访问令牌

• goto https://console.cloud.google.com
• 从左侧选择 Cloud Functions (云功能)
• 选择 ext-storage-resize-images-generateResizedImage
• 点击 EDIT
• 从Inline编辑器转到文件 FUNCTIONS/LIB/INDEX.JS
• 在此行之前添加//(删除metadata.metadata.firebaseStorageDownloadTokens; )
• 也对此文件的同一行进行注释 FUNCTIONS/SRC/INDEX.TS
• 按 DEPLOY ，然后等到完成

• goto https://console.cloud.google.com
• select Cloud Functions from the left
• select ext-storage-resize-images-generateResizedImage
• Click EDIT
• from Inline Editor goto file FUNCTIONS/LIB/INDEX.JS
• Add // before this line (delete metadata.metadata.firebaseStorageDownloadTokens;)
• Comment the same line from this file too FUNCTIONS/SRC/INDEX.TS
• Press DEPLOY and wait until it finish

注意:原始尺寸和调整后的尺寸将具有相同的令牌.

note: both original and resized will have the same Token.

这篇关于云功能:调整大小后的图像无法加载的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！