使用角度指令在页面加载时重新缩放和裁剪图像答案

【问题标题】：Rescaling and cropping image at page load with angular directive使用角度指令在页面加载时重新缩放和裁剪图像
【发布时间】：2018-11-30 11:18:50
【问题描述】：

我有一个指令可以根据图像的高度和宽度重新缩放和裁剪图像。

angular.module('starter.directives', ['starter.controllers']).directive('styleImage', function () {
return {
    restrict: 'A',
    link: function preLink(scope, elem, attr) {
        elem.on('load', function () {
            styleImage(elem[0])
        });
    }
};

})

哪个 styleImage 函数获取元素的宽度和高度并重新缩放和裁剪它。我将指令称为如下：

<img ng-src="{{user.image_path }}" class="user-image" style-image
                             id="{{'user'+user.user_id}}">

一切都很好，除了当我加载页面时，指令需要几秒钟才能重新缩放和裁剪图像。因此，起初图像以其初始宽度和大小出现。是否可以在加载图像之前强制指令运行？如果是这样，我该如何实现？

【问题讨论】：

标签： javascript jquery html css angularjs

【解决方案1】：

Angular 中的事件顺序是

1- Routes 检测通过浏览器请求的 URL。

2- Http request 获取路由中声明的视图模板Url。

3- View 呈现在页面上。

4- directives 在视图触发

所以看到图像然后看到它被裁剪是正常的行为，

我认为解决方案是在你的指令中使用模板我的意思是这样的

HTML

<style-image my-src='user.image_path'></style-image>

指令

angular.module('starter.directives', ['starter.controllers']).directive('styleImage', function () {
return {
  restrict: 'E',
  scope{
    mySrc:"="
  },
  link: function preLink(scope, elem, attr) {
    var img= document.createElement('img');
    img.setAttribute('src',scope.mySrc)
    styleImage(img)
    elem.append(img);
   }
 };
})

【讨论】：

谢谢。这对我帮助很大。但是还有另一个问题。一些图像不会出现，当我检查 chromes 网络时，所有其他图像发起者都是指令.js（指令所在），不会出现的图像是“其他”。你知道为什么会这样吗？
我的假设是该指令在图像传输之前运行。是这样吗？如果是这样，我该如何解决？
您可以在指令中请求链接功能内的图像
你能告诉我怎么做吗？我找不到任何有用的东西。
很抱歉迟到了.. 很高兴听到你修复了它

【解决方案2】：

试试这个below links

Link

link1

【讨论】：

这不是我想要的。我想自动重新缩放和图像。而且我没有重新缩放和裁剪的问题。问题在于执行时间