Fatal编程技术网

AngularJS指令创建缩略图

angularjs

AngularJS指令创建缩略图,angularjs,Angularjs,我刚刚开始学习AngularJS，我正在接近指令。我需要创建一个名为f.e.“thumboil”的指令，该指令接受一个“src”（图像）作为输入，并创建它的缩略图。 到目前为止，我已经编写了javascript函数来创建正确工作的缩略图： 函数readURL（输入）{ var imageSize=50； if（input.files&&input.files[0]）{ var reader=new FileReader（）； reader.onload=函数（e）{ var blah=$（“#


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

函数readURL（输入）{
var imageSize=50；
if（input.files&&input.files[0]）{
var reader=new FileReader（）；
reader.onload=函数（e）{
var blah=$（“#myimage”）；
blah.attr（'src'，e.target.result）；
var height=blah.height（）；
var width=blah.width（）；
if（高度<图像大小&宽度<图像大小）{
如果（宽度>高度）{
blah.宽度（图像大小）；
}
否则{
blah.高度（图像大小）
}
}
};
reader.readAsDataURL（input.files[0]）；
}
}
然而，我还没有找到一个基于JS函数生成（AngularJS）元素的简单示例。有什么帮助吗
谢谢

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

您可以将其委托给服务器（您将发现许多用于图像处理的节点模块），也可以使用外部服务，如

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

  • 在web应用程序中以较小的大小上载：也许您可以使用类似的库
  • 仅显示：您应该只使用CSS调整大小，并使用
    宽度
    和
    高度
    属性。
  • 在/PhoneGap应用程序中阅读/存储：尝试利用（免责声明：我写的）
    • IE8/9中没有FileReader，因此如果目标受众中有FileReader，请确保为其包含polyfill。在我的应用程序中，我只使用
    ，并在添加文件时让表单控制器在作用域中设置dataUrl。 
    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" />