Рисование изображения на холсте с помощью Pixabay API (Jquery) - PullRequest
Новая
       18

Рисование изображения на холсте с помощью Pixabay API (Jquery)

0 голосов
/ 31 января 2019

JSFIDDLE

Вот моя проблема: я хочу нарисовать изображение во второй строке консоли, когда я дважды щелкну по «Получить данные JSON» на моем холсте.

Надеюсь, это было ясно.Я думаю, что это немного сложно ...

Вот мой код: 

    <!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<canvas id="test1" width="200px" height="200px"> </canvas>
<input id="urlBanner" type="text" style="width:450px;" maxlength="100">

<button type="button"  value="Get JSON Data" onclick="getUrlBanner()">Get JSON data</button>

<script>
function getUrlBanner()
{
    var urlBanner = document.getElementById("urlBanner").value; 
   console.log(urlBanner);


var urlAPI = "https://pixabay.com/api/?key=10642718-3227f97c509ef5fe89537eec9&q=";
//var full = "full:" + urlBanner; 
//console.log(full);

$(document).ready(function(){
  $("button").click(function(){

        fetch(urlAPI+urlBanner+"&image_type=photo")
    .then(res => res.json())
.then((out) => {
        var img = out.hits[0].largeImageURL;
        document.getElementById('test1').src = img;
        console.log(img);
        console.log("full : " + urlAPI+urlBanner+"&image_type=photo");
}).catch(err => console.error(err));

  });
});
}
$(document).ready(function() {
  $('#test1').each(function() {
 var myCanvas = document.getElementById('test1');
var ctx = document.getContext('2d');
var img = new Image;
img.onload = function(){
  ctx.drawImage(img[0],10,10); 
};
img.src = 'UrlBanner';
  });
});

</script>
</body>
</html>

Мой API работает нормально, это нормально.На самом деле проблема действительно в этом, я думаю 

$(document).ready(function() {
      $('#test1').each(function() {
     var myCanvas = document.getElementById('test1');
    var ctx = document.getContext('2d');
    var img = new Image;
    img.onload = function(){
      ctx.drawImage(img[0],10,10);

Я не могу ее получить ... Файл jpg в консоли должен появиться на моем холсте.

Заранее спасибо,

...