时间戳

首页 > 解决方案 > Angular：如何检测图像方向后视或当我从数据库中获取图像时？

javascript - Angular：如何检测图像方向后视或当我从数据库中获取图像时？

问题描述

我正在尝试做一个居中和裁剪的图像缩略图，所以我从数据库中获取。我找到了有关如何执行此操作的信息： https ://aaronparecki.com/2016/08/13/4/css-thumbnails

该资源是为 javascript 编写的，我使用的是 Angular 7。所以，我在检测图像是否为肖像时遇到了问题。

当我在页面加载之前获取所有照片时，我尝试添加类肖像，但问题是这是我从数据库获得的路径，所以我构建了图像对象。代码是：

 getPhotosUser(page) {
    this._photoService.getPhotosUser(this.user.id, page).subscribe(
      response => {
        this.photos = response.objects

     var addImageOrientationClass = function (img) {
      var imgObject = new Image();
      imgObject.src = img;
      if(imgObject.naturalHeight > imgObject.naturalWidth){
        img.classList.add("portrait")
      }
    }

    this.photos.forEach(function (value: any) {
      console.log("PHTOOOSOASAOSIA")
      value.path = environment.api.replace('/api', '/') + value.path.replace('app/', '');
      addImageOrientationClass(value.path)
    })
  }
)
}

我得到的错误是：

错误类型错误：无法读取未定义的属性“添加”

我也尝试将它或类似的东西放在 afterview 中，但我没有得到图像的值（如上面资源中的示例）。在简历中，我的代码如下：

  ngAfterViewInit() {
     var addImageOrientationClass = function (img) {
       console.log(typeof(img))
       if (img.naturalHeight > img.naturalWidth) {
         img.classList.add("portrait")
       }
     }
     var images = document.querySelectorAll("thumbnail img");
     images.forEach(function (value: any){
       if (value.complete){
         addImageOrientationClass(value)
       }else{
         value.addEventListener("load", function(evt){
          addImageOrientationClass(evt.target)
         })
       }
     })
  }

图像是空的，为此，如果有人可以帮助我或告诉我有关对此有用的库，我不会得到任何图像。

提前致谢。

标签： javascriptangularimagetypescript

解决方案

让我总结一下您的问题，因此您的要求是从数据库加载图像并将它们呈现为缩略图，居中和裁剪。

所以实现的基本思想是：

a）缩略图：只需将图像标签包裹在锚标签内，这将呈现为缩略图

b) 居中和裁剪：使用相同的 css，即您所指的文档。

c）动态加载图像：

 1) Create placeholders for anchor->image tag  nested inside your photos array
 2) map image source dynamically : <img [src]="urlVariable" />

PS：您提到的javascript代码仅用于方向，如果您想动态创建图像元素并在Angular中呈现这些元素，您可以参考：

角度渲染器

推荐阅读