Добавление изображения на холст с помощью URL-адреса Pixabay API в Jquery - PullRequest
Новая
       8

Добавление изображения на холст с помощью URL-адреса Pixabay API в Jquery

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

Как добавить ссылки на изображения на холсте с помощью pixabay API? 

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<input id="urlBanner" placeholder="Tag" type="text" style="width:450px;" maxlength="100">
<button type="button"  value="Get JSON Data" onclick="getUrlBanner()">Ok</button>
<canvas id="test1" width="200" height="200"></canvas>


 <script>
//API PIXABAY`

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;

//IMAGE FOND
        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 design = $(this).attr[0];
    var id = $(this).attr('id');
    var canvas = $(this).find("canvas")[0];
    var img = new Image;
    img.onload = function() {
      ctx.drawImage( img, 0, 0);

    };
    img.src = design;
  });
});
</script>
 </html>

В консоли я получаю хороший URL-адрес изображения, но мне нужно добавить егов моем холсте.https://jsfiddle.net/6x1q2pm0/2/

Здесь API pixabay в настоящее время выдает img под названием LargedImageURL.

В противном случае я попытался с изображением, и оно работает https://jsfiddle.net/6x1q2pm0/2/ (вам нужно дважды щелкнутьна JSON DATA и добавить тег)

Но мне действительно нужен Canva, чтобы изменить его и добавить текст.Заранее спасибо

...