Question

我刚刚开始学习AngularJS，我正在接近指令。我需要创建一个名为f.e的指令。 “thumbnail”将“src”（图像）作为输入，并创建它的缩略图。到目前为止，我已经编写了javascript函数来创建正确执行其工作的缩略图：

function readURL(input) {

var imageSize = 50;

if (input.files && input.files[0]) {
    var reader = new FileReader();
    reader.onload = function (e) {

        var blah = $('#myimage');
        blah.attr('src', e.target.result);

        var height = blah.height();
        var width = blah.width();

        if (height < imageSize && width < imageSize) {
            if (width > height) {
                blah.width(imageSize);
            }
            else {
                blah.height(imageSize)
            }
        }
    };
    reader.readAsDataURL(input.files[0]);
  }
}
</script>
<body  onload="readURL(this);">
<img id="myimage" src="../picture.gif" width="50" alt="your image" />

但是我还没有找到一个基于JS函数生成（在AngularJS中）一个Element的简单示例。有帮助吗？
谢谢！

Answer 1

这取决于你想要达到的目标。如果您在客户端创建缩略图的目的是：

Web应用程序中

以较小的尺寸上传 ：也许您可以使用像http://www.plupload.com这样的库。
仅显示：您应该使用带有width和height属性的CSS大小调整。 <img src="/original/320x320.jpg" style="width: 100px; height: 100px">
阅读/存储Ionic / PhoneGap应用：尝试使用angular-thumbnail（免责声明：我写了）

Answer 2

在客户端进行此类图像处理并不是一个好主意，因为到目前为止，IE中的Filereader还没有很好的支持。

您可以将此委托给服务器（您将找到许多用于图像处理的节点模块），或者您可以使用cloudinay等外部服务

AngularJS指令创建缩略图

2 个答案: