Acest fișier conține funcții care interacționează cu API-ul Pixabay pentru a obține imagini și videouri pe baza diferitelor criterii de căutare. Mai jos este o descriere detaliată a fiecărei funcții, modul de utilizare și exemple de integrare în alte fișiere.
Pentru a utiliza funcțiile din apiPixabay.js
în alte fișiere, trebuie mai întâi să le exporți și să le imporți corespunzător.
În apiPixabay.js
, funcțiile sunt exportate astfel:
export {
searchImages,
searchVideos,
getImageDetails,
getPopularImages,
getPopularVideos,
getRandomImages,
getRandomVideos,
getImagesByColor,
getVideosByColor,
};
Pentru a importa și utiliza aceste funcții în alte fișiere, folosește import
:
import { searchImages, getImageDetails } from './apiPixabay.js';
Funcție auxiliară pentru a face cereri HTTP și a obține date de la API.
url
(string): URL-ul pentru cererea API.
Un Promise care se rezolvă cu datele obținute de la API.
const API_KEY = '24587351-f51ecbfdd1a1ed72c58205b43';
const BASE_URL = 'https://pixabay.com/api';
async function fetchFromAPI(url) {
const response = await fetch(url);
if (!response.ok) {
throw new Error(`Network response was not ok. Status: ${response.status}`);
}
const data = await response.json();
return data;
}
Această funcție este folosită intern de toate celelalte funcții pentru a trimite cereri API și a prelua date. Nu este destinată utilizării directe.
Obține imagini după un cuvânt cheie.
query
(string): Cuvântul cheie pentru căutare.page
(number): Numărul paginii de rezultate (implicit 1).perPage
(number): Numărul de rezultate pe pagină (implicit 20).
Un Promise care se rezolvă cu datele despre imagini pentru cuvântul cheie specificat.
{
"total": 500,
"totalHits": 100,
"hits": [
{
"id": 195893,
"pageURL": "https://pixabay.com/photos/blossom-bloom-flower-195893/",
"type": "photo",
"tags": "blossom, bloom, flower",
"previewURL": "https://cdn.pixabay.com/photo/2013/07/21/13/00/rose-165819_150.jpg",
"previewWidth": 150,
"previewHeight": 84,
"webformatURL": "https://pixabay.com/get/54e1d14a4e5aa414f1dc846096293e7b1d39dfe1504c704c7d267ad2914fc7_640.jpg",
"webformatWidth": 640,
"webformatHeight": 360,
"largeImageURL": "https://pixabay.com/get/54e1d14a4e5aa414f6da8c7dda793677173fd7e65a516c48732f7edd964ec2_1280.jpg",
"imageWidth": 4000,
"imageHeight": 2250,
"imageSize": 4731420,
"views": 7671,
"downloads": 6439,
"favorites": 1,
"likes": 5,
"comments": 2,
"user_id": 48777,
"user": "422737",
"userImageURL": "https://cdn.pixabay.com/user/2014/06/11/00-53-35-639_250x250.jpg"
}
// ...alte imagini
]
}
import { searchImages } from './apiPixabay.js';
async function displayImages(query) {
try {
const data = await searchImages(query);
const imagesContainer = document.getElementById('imagesContainer');
imagesContainer.innerHTML = ''; // Curăță conținutul anterior
data.hits.forEach(image => {
const imgElement = document.createElement('img');
imgElement.src = image.previewURL;
imgElement.alt = image.tags;
imagesContainer.appendChild(imgElement);
});
} catch (error) {
console.error('Error fetching images:', error);
}
}
// Exemplu de apelare
displayImages('nature');
Elemente Cheie ale Răspunsului:
total
: Numărul total de rezultate.totalHits
: Numărul total de rezultate relevante.hits
: Lista de imagini găsite.hits[0].previewURL
: URL-ul imaginii de previzualizare.hits[0].largeImageURL
: URL-ul imaginii la rezoluție mare.
Obține videouri după un cuvânt cheie.
query
(string): Cuvântul cheie pentru căutare.page
(number): Numărul paginii de rezultate (implicit 1).perPage
(number): Numărul de rezultate pe pagină (implicit 20).
Un Promise care se rezolvă cu datele despre videouri pentru cuvântul cheie specificat.
{
"total": 500,
"totalHits": 100,
"hits": [
{
"id": 16547,
"pageURL": "https://pixabay.com/videos/id-16547/",
"type": "film",
"tags": "floare, natura, primavara",
"videos": {
"large": {
"url": "https://cdn.pixabay.com/vimeo/67822/large.mp4",
"width": 1920,
"height": 1080,
"size": 5090874
},
"medium": {
"url": "https://cdn.pixabay.com/vimeo/67822/medium.mp4",
"width": 1280,
"height": 720,
"size": 2222320
},
"small": {
"url": "https://cdn.pixabay.com/vimeo/67822/small.mp4",
"width": 640,
"height": 360,
"size": 715802
},
"tiny": {
"url": "https://cdn.pixabay.com/vimeo/67822/tiny.mp4",
"width": 320,
"height": 180,
"size": 117018
}
},
"views": 2623,
"downloads": 1834,
"favorites": 30,
"likes": 22,
"comments": 4,
"user_id": 48777,
"user": "422737",
"userImageURL": "https://cdn.pixabay.com/user/2014/06/11/00-53-35-639_250x250.jpg"
}
// ...alte videouri
]
}
import { searchVideos } from './apiPixabay.js';
async function displayVideos(query) {
try {
const data = await searchVideos(query);
const videosContainer = document.getElementById('videosContainer');
videosContainer.innerHTML = ''; // Curăță conținutul anterior
data.hits.forEach(video => {
const videoElement = document.createElement('video');
videoElement.src = video.videos.medium.url;
videoElement.controls = true;
videosContainer.appendChild(videoElement);
});
} catch (error) {
console.error('Error fetching videos:', error);
}
}
// Exemplu de apelare
displayVideos('nature');
Elemente Cheie ale Răspunsului:
total
: Numărul total de rezultate.totalHits
: Numărul total de rezultate relevante.hits
: Lista de videouri găsite.hits[0].videos
: Variantele de rezoluție ale videoclipului.- `
hits[0].videos.large.url`: URL-ul videoclipului la rezoluție mare.
Obține detalii despre o imagine după ID.
imageId
(number): ID-ul imaginii.
Un Promise care se rezolvă cu detaliile imaginii pentru ID-ul specificat.
{
"total": 1,
"totalHits": 1,
"hits": [
{
"id": 195893,
"pageURL": "https://pixabay.com/photos/blossom-bloom-flower-195893/",
"type": "photo",
"tags": "blossom, bloom, flower",
"previewURL": "https://cdn.pixabay.com/photo/2013/07/21/13/00/rose-165819_150.jpg",
"previewWidth": 150,
"previewHeight": 84,
"webformatURL": "https://pixabay.com/get/54e1d14a4e5aa414f1dc846096293e7b1d39dfe1504c704c7d267ad2914fc7_640.jpg",
"webformatWidth": 640,
"webformatHeight": 360,
"largeImageURL": "https://pixabay.com/get/54e1d14a4e5aa414f6da8c7dda793677173fd7e65a516c48732f7edd964ec2_1280.jpg",
"imageWidth": 4000,
"imageHeight": 2250,
"imageSize": 4731420,
"views": 7671,
"downloads": 6439,
"favorites": 1,
"likes": 5,
"comments": 2,
"user_id": 48777,
"user": "422737",
"userImageURL": "https://cdn.pixabay.com/user/2014/06/11/00-53-35-639_250x250.jpg"
}
]
}
import { getImageDetails } from './apiPixabay.js';
async function displayImageDetails(imageId) {
try {
const data = await getImageDetails(imageId);
const imageDetailsContainer = document.getElementById('imageDetailsContainer');
imageDetailsContainer.innerHTML = ''; // Curăță conținutul anterior
const image = data.hits[0];
const imgElement = document.createElement('img');
imgElement.src = image.largeImageURL;
imgElement.alt = image.tags;
const detailsElement = document.createElement('div');
detailsElement.innerHTML = `
<p><strong>Tags:</strong> ${image.tags}</p>
<p><strong>Views:</strong> ${image.views}</p>
<p><strong>Downloads:</strong> ${image.downloads}</p>
`;
imageDetailsContainer.appendChild(imgElement);
imageDetailsContainer.appendChild(detailsElement);
} catch (error) {
console.error('Error fetching image details:', error);
}
}
// Exemplu de apelare
displayImageDetails(195893);
Elemente Cheie ale Răspunsului:
hits
: Lista de imagini găsite.hits[0].pageURL
: URL-ul paginii imaginii.hits[0].largeImageURL
: URL-ul imaginii la rezoluție mare.
Obține imagini populare.
category
(string): Categoria imaginii (implicit '').editorsChoice
(boolean): Filtru pentru alegerile editorilor (implicit false).page
(number): Numărul paginii de rezultate (implicit 1).perPage
(number): Numărul de rezultate pe pagină (implicit 20).
Un Promise care se rezolvă cu datele despre imagini populare.
{
"total": 500,
"totalHits": 100,
"hits": [
{
"id": 195893,
"pageURL": "https://pixabay.com/photos/blossom-bloom-flower-195893/",
"type": "photo",
"tags": "blossom, bloom, flower",
"previewURL": "https://cdn.pixabay.com/photo/2013/07/21/13/00/rose-165819_150.jpg",
"previewWidth": 150,
"previewHeight": 84,
"webformatURL": "https://pixabay.com/get/54e1d14a4e5aa414f1dc846096293e7b1d39dfe1504c704c7d267ad2914fc7_640.jpg",
"webformatWidth": 640,
"webformatHeight": 360,
"largeImageURL": "https://pixabay.com/get/54e1d14a4e5aa414f6da8c7dda793677173fd7e65a516c48732f7edd964ec2_1280.jpg",
"imageWidth": 4000,
"imageHeight": 2250,
"imageSize": 4731420,
"views": 7671,
"downloads": 6439,
"favorites": 1,
"likes": 5,
"comments": 2,
"user_id": 48777,
"user": "422737",
"userImageURL": "https://cdn.pixabay.com/user/2014/06/11/00-53-35-639_250x250.jpg"
}
// ...alte imagini
]
}
import { getPopularImages } from './apiPixabay.js';
async function displayPopularImages(category, editorsChoice) {
try {
const data = await getPopularImages(category, editorsChoice);
const imagesContainer = document.getElementById('popularImagesContainer');
imagesContainer.innerHTML = ''; // Curăță conținutul anterior
data.hits.forEach(image => {
const imgElement = document.createElement('img');
imgElement.src = image.previewURL;
imgElement.alt = image.tags;
imagesContainer.appendChild(imgElement);
});
} catch (error) {
console.error('Error fetching popular images:', error);
}
}
// Exemplu de apelare
displayPopularImages('nature', true);
Elemente Cheie ale Răspunsului:
total
: Numărul total de rezultate.totalHits
: Numărul total de rezultate relevante.hits
: Lista de imagini populare găsite.
Obține videouri populare.
category
(string): Categoria videoclipului (implicit '').editorsChoice
(boolean): Filtru pentru alegerile editorilor (implicit false).page
(number): Numărul paginii de rezultate (implicit 1).perPage
(number): Numărul de rezultate pe pagină (implicit 20).
Un Promise care se rezolvă cu datele despre videouri populare.
{
"total": 500,
"totalHits": 100,
"hits": [
{
"id": 16547,
"pageURL": "https://pixabay.com/videos/id-16547/",
"type": "film",
"tags": "floare, natura, primavara",
"videos": {
"large": {
"url": "https://cdn.pixabay.com/vimeo/67822/large.mp4",
"width": 1920,
"height": 1080,
"size": 5090874
},
"medium": {
"url": "https://cdn.pixabay.com/vimeo/67822/medium.mp4",
"width": 1280,
"height": 720,
"size": 2222320
},
"small": {
"url": "https://cdn.pixabay.com/vimeo/67822/small.mp4",
"width": 640,
"height": 360,
"size": 715802
},
"tiny": {
"url": "https://cdn.pixabay.com/vimeo/67822/tiny.mp4",
"width": 320,
"height": 180,
"size": 117018
}
},
"views": 2623,
"downloads": 1834,
"favorites": 30,
"likes": 22,
"comments": 4,
"user_id": 48777,
"user": "422737",
"userImageURL": "https://cdn.pixabay.com/user/2014/06/11/00-53-35-639_250x250.jpg"
}
// ...
alte videouri
]
}
import { getPopularVideos } from './apiPixabay.js';
async function displayPopularVideos(category, editorsChoice) {
try {
const data = await getPopularVideos(category, editorsChoice);
const videosContainer = document.getElementById('popularVideosContainer');
videosContainer.innerHTML = ''; // Curăță conținutul anterior
data.hits.forEach(video => {
const videoElement = document.createElement('video');
videoElement.src = video.videos.medium.url;
videoElement.controls = true;
videosContainer.appendChild(videoElement);
});
} catch (error) {
console.error('Error fetching popular videos:', error);
}
}
// Exemplu de apelare
displayPopularVideos('nature', true);
Elemente Cheie ale Răspunsului:
total
: Numărul total de rezultate.totalHits
: Numărul total de rezultate relevante.hits
: Lista de videouri populare găsite.
Obține imagini aleatorii.
query
(string): Cuvântul cheie pentru căutare.page
(number): Numărul paginii de rezultate (implicit 1).perPage
(number): Numărul de rezultate pe pagină (implicit 3).
Un Promise care se rezolvă cu datele despre imagini aleatorii.
{
"total": 500,
"totalHits": 3,
"hits": [
{
"id": 195893,
"pageURL": "https://pixabay.com/photos/blossom-bloom-flower-195893/",
"type": "photo",
"tags": "blossom, bloom, flower",
"previewURL": "https://cdn.pixabay.com/photo/2013/07/21/13/00/rose-165819_150.jpg",
"previewWidth": 150,
"previewHeight": 84,
"webformatURL": "https://pixabay.com/get/54e1d14a4e5aa414f1dc846096293e7b1d39dfe1504c704c7d267ad2914fc7_640.jpg",
"webformatWidth": 640,
"webformatHeight": 360,
"largeImageURL": "https://pixabay.com/get/54e1d14a4e5aa414f6da8c7dda793677173fd7e65a516c48732f7edd964ec2_1280.jpg",
"imageWidth": 4000,
"imageHeight": 2250,
"imageSize": 4731420,
"views": 7671,
"downloads": 6439,
"favorites": 1,
"likes": 5,
"comments": 2,
"user_id": 48777,
"user": "422737",
"userImageURL": "https://cdn.pixabay.com/user/2014/06/11/00-53-35-639_250x250.jpg"
}
// ...alte imagini
]
}
import { getRandomImages } from './apiPixabay.js';
async function displayRandomImages(query) {
try {
const data = await getRandomImages(query);
const imagesContainer = document.getElementById('randomImagesContainer');
imagesContainer.innerHTML = ''; // Curăță conținutul anterior
data.hits.forEach(image => {
const imgElement = document.createElement('img');
imgElement.src = image.previewURL;
imgElement.alt = image.tags;
imagesContainer.appendChild(imgElement);
});
} catch (error) {
console.error('Error fetching random images:', error);
}
}
// Exemplu de apelare
displayRandomImages('nature');
Elemente Cheie ale Răspunsului:
total
: Numărul total de rezultate.totalHits
: Numărul total de rezultate relevante.hits
: Lista de imagini aleatorii găsite.
Obține videouri aleatorii.
category
(string): Categoria videoclipului (implicit '').page
(number): Numărul paginii de rezultate (implicit 1).perPage
(number): Numărul de rezultate pe pagină (implicit 20).
Un Promise care se rezolvă cu datele despre videouri aleatorii.
{
"total": 500,
"totalHits": 100,
"hits": [
{
"id": 16547,
"pageURL": "https://pixabay.com/videos/id-16547/",
"type": "film",
"tags": "floare, natura, primavara",
"videos": {
"large": {
"url": "https://cdn.pixabay.com/vimeo/67822/large.mp4",
"width": 1920,
"height": 1080,
"size": 5090874
},
"medium": {
"url": "https://cdn.pixabay.com/vimeo/67822/medium.mp4",
"width": 1280,
"height": 720,
"size": 2222320
},
"small": {
"url": "https://cdn.pixabay.com/vimeo/67822/small.mp4",
"width": 640,
"height": 360,
"size": 715802
},
"tiny": {
"url": "https://cdn.pixabay.com/vimeo/67822/tiny.mp4",
"width": 320,
"height": 180,
"size": 117018
}
},
"views": 2623,
"downloads": 1834,
"favorites": 30,
"likes": 22,
"comments": 4,
"user_id": 48777,
"user": "422737",
"userImageURL": "https://cdn.pixabay.com/user/2014/06/11/00-53-35-639_250x250.jpg"
}
// ...alte videouri
]
}
import { getRandomVideos } from './apiPixabay.js';
async function displayRandomVideos(category) {
try {
const data = await getRandomVideos(category);
const videosContainer = document.getElementById('randomVideosContainer');
videosContainer.innerHTML = ''; // Curăță conținutul anterior
data.hits.forEach(video => {
const videoElement = document.createElement('video');
videoElement.src = video.videos.medium.url;
videoElement.controls = true;
videosContainer.appendChild(videoElement);
});
} catch (error) {
console.error('Error fetching random videos:', error);
}
}
// Exemplu de apelare
displayRandomVideos('nature');
Elemente Cheie ale Răspunsului:
total
: Numărul total de rezultate.totalHits
: Numărul total de rezultate relevante.hits
: Lista de videouri aleatorii găsite.
Obține imagini după culoare.
color
(string): Culoarea pentru căutare.page
(number): Numărul paginii de rezultate (implicit 1).perPage
(number): Numărul de rezultate pe pagină (implicit 20).
Un Promise care se rezolvă cu datele despre imagini pentru culoarea specificată.
{
"total": 500,
"totalHits": 100,
"hits": [
{
"id": 195893,
"pageURL": "https://pixabay.com/photos/blossom-bloom-flower-195893/",
"type": "photo",
"tags": "blossom, bloom, flower",
"previewURL": "https://cdn.pixabay.com/photo/2013/07/21/13/00/rose-165819_150.jpg",
"previewWidth": 150,
"previewHeight": 84,
"webformatURL": "https://pixabay.com/get/54e1d14a4e5aa414f1dc846096293e7b1d39dfe1504c704c7d267ad2914fc7_640.jpg",
"webformatWidth": 640,
"webformatHeight": 360,
"largeImageURL": "https://pixabay.com/get/54e1d14a4e5aa414f6da8c7dda793677173fd7e65a516c48732f7edd964ec2_1280.jpg",
"image
Width": 4000,
"imageHeight": 2250,
"imageSize": 4731420,
"views": 7671,
"downloads": 6439,
"favorites": 1,
"likes": 5,
"comments": 2,
"user_id": 48777,
"user": "422737",
"userImageURL": "https://cdn.pixabay.com/user/2014/06/11/00-53-35-639_250x250.jpg"
}
// ...alte imagini
]
}
import { getImagesByColor } from './apiPixabay.js';
async function displayImagesByColor(color) {
try {
const data = await getImagesByColor(color);
const imagesContainer = document.getElementById('imagesByColorContainer');
imagesContainer.innerHTML = ''; // Curăță conținutul anterior
data.hits.forEach(image => {
const imgElement = document.createElement('img');
imgElement.src = image.previewURL;
imgElement.alt = image.tags;
imagesContainer.appendChild(imgElement);
});
} catch (error) {
console.error('Error fetching images by color:', error);
}
}
// Exemplu de apelare
displayImagesByColor('red');
Elemente Cheie ale Răspunsului:
total
: Numărul total de rezultate.totalHits
: Numărul total de rezultate relevante.hits
: Lista de imagini găsite pentru culoarea specificată.
Obține videouri după culoare (dacă este suportat).
color
(string): Culoarea pentru căutare.page
(number): Numărul paginii de rezultate (implicit 1).perPage
(number): Numărul de rezultate pe pagină (implicit 20).
Un Promise care se rezolvă cu datele despre videouri pentru culoarea specificată.
{
"total": 500,
"totalHits": 100,
"hits": [
{
"id": 16547,
"pageURL": "https://pixabay.com/videos/id-16547/",
"type": "film",
"tags": "floare, natura, primavara",
"videos": {
"large": {
"url": "https://cdn.pixabay.com/vimeo/67822/large.mp4",
"width": 1920,
"height": 1080,
"size": 5090874
},
"medium": {
"url": "https://cdn.pixabay.com/vimeo/67822/medium.mp4",
"width": 1280,
"height": 720,
"size": 2222320
},
"small": {
"url": "https://cdn.pixabay.com/vimeo/67822/small.mp4",
"width": 640,
"height": 360,
"size": 715802
},
"tiny": {
"url": "https://cdn.pixabay.com/vimeo/67822/tiny.mp4",
"width": 320,
"height": 180,
"size": 117018
}
},
"views": 2623,
"downloads": 1834,
"favorites": 30,
"likes": 22,
"comments": 4,
"user_id": 48777,
"user": "422737",
"userImageURL": "https://cdn.pixabay.com/user/2014/06/11/00-53-35-639_250x250.jpg"
}
// ...alte videouri
]
}
import { getVideosByColor } from './apiPixabay.js';
async function displayVideosByColor(color) {
try {
const data = await getVideosByColor(color);
const videosContainer = document.getElementById('videosByColorContainer');
videosContainer.innerHTML = ''; // Curăță conținutul anterior
data.hits.forEach(video => {
const videoElement = document.createElement('video');
videoElement.src = video.videos.medium.url;
videoElement.controls = true;
videosContainer.appendChild(videoElement);
});
} catch (error) {
console.error('Error fetching videos by color:', error);
}
}
// Exemplu de apelare
displayVideosByColor('red');
Elemente Cheie ale Răspunsului:
total
: Numărul total de rezultate.totalHits
: Numărul total de rezultate relevante.hits
: Lista de videouri găsite pentru culoarea specificată.