FTT-JavaScript/aulajs31.html at master · danielscarvalho/FTT-JavaScript · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
<!DOCTYPE html>
<html>
<head>
<title>JavaScript Aula 31</title>
<script>

        function getImage() {

            console.log("getting image...");

            var myImage = document.getElementById('imgplace');

            var myHeaders = new Headers(); //HEADER http

            var myInit = { method: 'GET',
                    headers: myHeaders,
                    mode: 'cors',
                    cache: 'default' };

            fetch('https://picsum.photos/200/300', myInit) //AJAX
                .then(function(response) {
                    return response.blob();
                })
                .then(function(myBlob) {
                    var objectURL = URL.createObjectURL(myBlob);
                    myImage.src = objectURL;
                });
        } //getImage

</script>
</head>
<body>
<h1>JavaScript Aula 31</h1>
<h2>Consome API que fornece imagem</h2>
<p>
Referências:
<ul>
    <li><a target="_new" href="https://developer.mozilla.org/pt-BR/docs/Web/API/Fetch_API/Using_Fetch">"fetch - ECMA Script 6"</a></li>
    <li><a target="_new" href="https://books.goalkicker.com/JavaScriptBook/">Livro sobre JavaScript</li>
    <li><a target="_new" href="https://www.w3schools.com/js/default.asp">W3CSchools</a>
    <li><a target="_new" href='https://picsum.photos/'>Lorem Picsum</a></li>
</ul>
</p>
<button onclick="getImage()";>Get Image</button>
<div id="imglist">
    <hr>
    <img id="imgplace" alt="Random Image">
</div>

</body>
</html>