AngularJS 指令创建缩略图-6ren

AngularJS 指令创建缩略图

转载作者：行者123 更新时间：2023-12-02 23:58:59

我刚刚开始学习 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 的简单示例。有什么帮助吗？
谢谢!

最佳答案

这取决于您想要实现的目标。如果您在客户端创建缩略图的目的是:

在网络应用程序中以较小的尺寸上传:也许您可以使用像 http://www.plupload.com 这样的库.
仅显示:您应该仅使用 CSS 调整大小 width和height特性。 <img src="/original/320x320.jpg" style="width: 100px; height: 100px">
在 Ionic 中读取/存储/PhoneGap 应用程序:尝试使用angular-thumbnail (免责声明:我写的)