La función d3.image() en D3.js es una parte de la API de solicitud que se usa para obtener las imágenes de cualquier URL de imagen dada. Si también se proporciona init en la función, establece cualquier propiedad adicional en la imagen antes de cargar la imagen.
Sintaxis:
d3.image(input[, init]);
Parámetros: esta función acepta un solo parámetro como se mencionó anteriormente y se describe a continuación:
- input: Toma la dirección de la imagen a buscar.
Valores devueltos: Devuelve la imagen de la URL de la imagen.
Los siguientes ejemplos ilustran la función D3.js image() en JavaScript.
Ejemplo 1:
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta
name="viewport"
path1tent="width=device-width,
initial-scale=1.0"/>
<title>D3.js image() Function</title>
</head>
<style></style>
<body>
<script src=
"https://d3js.org/d3.v4.min.js">
</script>
<script src=
"https://d3js.org/d3-dsv.v1.min.js">
</script>
<script src=
"https://d3js.org/d3-fetch.v1.min.js">
</script>
<script>
d3.image("https://robohash.org/image",
{ crossOrigin: "anonymous" }).then((img) => {
console.log(img);
});
</script>
</body>
</html>
Producción:
Ejemplo 2:
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta
name="viewport"
path1tent="width=device-width,
initial-scale=1.0"/>
<title>D3.js image() Function</title>
</head>
<style></style>
<body>
<script src=
"https://d3js.org/d3.v4.min.js">
</script>
<script src=
"https://d3js.org/d3-dsv.v1.min.js">
</script>
<script src=
"https://d3js.org/d3-fetch.v1.min.js">
</script>
<script>
d3.image(
`https://pbs.twimg.com/profile_images/1138375574726955008/1fNUyEdv_400x400.png`,
{ crossOrigin: "anonymous" }).then((img) => {
document.body.append("Image using d3.image()");
document.body.append(img);
});
</script>
</body>
</html>
Producción:
