Firebase 图像大小调整扩展。引用调整大小的图像

Posted

技术标签:

【中文标题】Firebase 图像大小调整扩展。引用调整大小的图像【英文标题】:Firebase Image Resize Extension. Referencing the resized images 【发布时间】:2020-05-10 21:25:32 【问题描述】:

第一次使用 Firebase 扩展,感觉 Image Resizer 非常适合我的需求。

但是,使用它的文档是一件小事,让我有点卡住了。

目前,我上传图片,它会自动生成新尺寸并将它们保存到我想要的路径。但是,我无法弄清楚如何调用现在调整大小的图像。

我目前正在使用这样的路径存储上传的图像;

      var storageRef = firebase.storage().ref("Project_Image/" + this.projectName + "/" + file.name);

然后使用这样的引用将原始照片作为 url 获取;

firebase.storage()
  .ref("Project_Image/" + this.projectName + "/" + file.name).getDownloadURL()
  .then((url) => 
    this.imageURL = url;
    // eslint-disable-next-line no-console
    console.log("Getting Image " + this.imageURL);
  )

这可行,但问题是我无法引用新创建的 600x300 调整大小的图像。现在称为 imagename_600x300.jpeg。

我尝试过使用

.ref("Project_Image/" + this.projectName + "/" + file.name + "_600x300")

但显然,它会抓取“imagename.jpeg_600x300”,因此返回错误/未定义。

我不确定是否有更好的方法来初始存储这些有助于检索的文件,或者是否有明显的答案。

谢谢!

【问题讨论】:

您必须更改代码以将“_600x300”字符串放在“.jpeg”之前。这将涉及解析file.name 的内容以使用正确的文件名重建新字符串。 【参考方案1】:

听起来您需要去掉扩展名并将其放在前缀之后。像这样的东西应该可以工作:

function resizedName(fileName, dimensions = '600x300') 
  const extIndex = fileName.lastIndexOf('.');
  const ext = fileName.substring(extIndex);
  return `$fileName.substring(0, extIndex)_$dimensions$ext`;

【讨论】:

以上是关于Firebase 图像大小调整扩展。引用调整大小的图像的主要内容,如果未能解决你的问题,请参考以下文章

如何在将图像上传到 Firebase 之前调整其大小?

firebase 的调整大小扩展完成后获取下载网址

URL图片仅在调整浏览器大小时显示

在上载到google cloud storage django之前调整图像大小

在不调整大小或重绘的情况下扩展 UIView

在css中调整图像大小以自动调整div [重复]