Как добавить изображение из массива JSON на холст HTML5 - PullRequest
Новая
       6

Как добавить изображение из массива JSON на холст HTML5

0 голосов
/ 15 октября 2018

Я пытаюсь создать слайд-шоу, где изображения размещаются во внешнем массиве JSON, загружаются на html-страницу и вставляются на холст HTML5.

Пока я могу загрузить все изображения, но не могу добавить одно изображение из загруженных изображений Json на холст.

HTML: 

<!DOCTYPE html>
<html>
<head>
<meta charset = "utf-8">

<link rel="stylesheet" type="text/css" 
href="http://localhost/slideshow.css">

<meta name="viewport" content="width=device-width">

<title> JSON SlideShow </title>

</head>

<body>


<header>
<h1> JSON </h1>

<button id="btn"> GET </button>

<div id=slideshow"></div>
<p>Canvas:</p>
<canvas id="Canvas777" width="240" height="297" style="border:1px solid 
#d3d3d3;">
Your browser does not support the HTML5 canvas tag.
</canvas>


<script src="http://localhost/slideshow.js"></script>

</header>    
</body>
</html>

Попытка JavaScript: 

var slideContainer = document.getElementById("slideshow");
var btn = document.getElementById("btn");

var getImages = new XMLHttpRequest();
   getImages.open('GET', 'http://localhost/slideshow.json');
   getImages.onload = function() {
       var ourData = JSON.parse(getImages.responseText);
       renderHTML(ourData);    
       };
   getImages.send();

function renderHTML(data) {
var htmlString = "";
for (i = 0; i < data.length; i++) {
htmlString += "<img src=" + data[i].img + ">" + "</img>";   
}
slideContainer.insertAdjacentHTML ('beforeend', htmlString);
}

window.onload = function() {
    var c = document.getElementById("myCanvas");
    var ctx = c.getContext("2d");
    var img = new Image();
img.onload = function() {
    ctx.drawImage(htmlString,10,10);
};
};

Я знаю, что идет не так, но не знаю, как это исправить.

1 Ответ

0 голосов
/ 15 октября 2018

Для демонстрации я использую ваши данные в качестве переменной.Также я использую только 2 изображения.Также я должен вызвать функцию renderHTML ().Вам нужно вызвать эту функцию с помощью getImages.onload Я надеюсь, что она работает для вас.

Хотя я использую 

let data = [
  {
    img:
      "https://s3-us-west-2.amazonaws.com/s.cdpn.io/222579/puppyBeagle300.jpg",
    msg: "There once was a kitten called Nina"
  },
  {
    img: "https://s3-us-west-2.amazonaws.com/s.cdpn.io/222579/puppyD300.jpg",
    msg: "Who was funny, silly"
  }
];

var slideContainer = document.getElementById("slideshow");
//var btn = document.getElementById("btn");

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");

/*
var getImages = new XMLHttpRequest();
   getImages.open('GET', 'http://localhost/TMA1/part3/slideshow.json');
   getImages.onload = function() {
       var ourData = JSON.parse(getImages.responseText);
       renderHTML(ourData);    
       };
   getImages.send();*/

function renderHTML(data) {
  data.map(f => {
    loadImg(f.img).then(successurl => {
      let htmlString = '<img width="150" src="' + successurl + '" />';
      slideContainer.insertAdjacentHTML("beforeend", htmlString);
      var img = new Image();
      img.src = successurl;

      ctx.drawImage(img, 10, 10);
    }),
      errorurl => {
        console.log("Error loading " + errorurl);
      };
  });
}

function loadImg(url) {
  return new Promise((resolve, reject) => {
    let img = new Image();

    img.onload = () => {
      resolve(url);
    };

    img.onerror = () => {
      reject(url);
    };
    img.src = url;
  });
}


renderHTML(data);
<button id="btn"> GET </button>

<div id="slideshow"></div>
<p>Canvas:</p>
<canvas id="myCanvas" width="240" height="297" style="border:1px solid 
#d3d3d3;">
Your browser does not support the HTML5 canvas tag.
</canvas>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...