我刚刚开始学习 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 (免责声明:我写的)
关于AngularJS 指令创建缩略图，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/21960965/