Angular js - isImage() - 通过 url 检查它是否是图像 [英] Angular js - isImage( ) - check if it's image by url
问题描述
是否可以通过给定的 url 检查图像是否存在并且它是图像资源?
例如:
angular.isImage('http://asd.com/asd/asd.jpg')
或者它只是服务器端的东西?
NO JQUERY 请我不要使用它
我认为最好的 javascript 方法是使用带有延迟对象的 HTMLImageElement 对象:
function isImage(src) {var deferred = $q.defer();var image = new Image();image.onerror = function() {deferred.resolve(false);};image.onload = function() {deferred.resolve(true);};image.src = src;返回 deferred.promise;}
用法:
isImage('http://asd.com/asd/asd.jpg').then(function(test) {控制台日志(测试);});
使用 HTMLImageElement
给你带来一些好处:不仅可以测试文件是否可下载,而且它是可以通过 img
标签显示的有效图像资源.>
我将此代码包装在简单的服务中以进行测试,它似乎有效:
app.controller('MainCtrl', function($scope, Utils) {$scope.test = function() {Utils.isImage($scope.source).then(function(result) {$scope.result = 结果;});};});app.factory('Utils', function($q) {返回 {isImage: 函数(src) {//... 以上 isImage 函数的代码}};});
演示:http://plnkr.co/edit/u5F6FfO3dEkNSMYV1amo?p=preview
Is it possible to check if by a given url the image exists and it's an image resource ?
for example:
angular.isImage('http://asd.com/asd/asd.jpg')
Or it's just a stuff for the server side ?
NO JQUERY please i'm not using it
I think the best javascript approach would be to use HTMLImageElement object with deferred object:
function isImage(src) {
var deferred = $q.defer();
var image = new Image();
image.onerror = function() {
deferred.resolve(false);
};
image.onload = function() {
deferred.resolve(true);
};
image.src = src;
return deferred.promise;
}
Usage:
isImage('http://asd.com/asd/asd.jpg').then(function(test) {
console.log(test);
});
Using HTMLImageElement
gives you some benefits: not only it tests that the file is downloadable but also it is valid image resource that can be displayed by img
tag.
I wrapped this code in simple service to make a test and it seems to work:
app.controller('MainCtrl', function($scope, Utils) {
$scope.test = function() {
Utils.isImage($scope.source).then(function(result) {
$scope.result = result;
});
};
});
app.factory('Utils', function($q) {
return {
isImage: function(src) {
// ... above code for isImage function
}
};
});
Demo: http://plnkr.co/edit/u5F6FfO3dEkNSMYV1amo?p=preview
这篇关于Angular js - isImage() - 通过 url 检查它是否是图像的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!