How to add image from JSON array onto HTML5 canvas

Question

I am trying to create a slideshow where the images are hosted in an external JSON array, and loaded onto the html page and inserted onto a HTML5 canvas.

So far I am able to load all the images, but cannot add one image from the loaded Json images to the canvas.

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 attempt:

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);
};
};

I know I am going wrong, but dont know how to fix it.

Answer 1

For the demo I'm using your data as a variable. Also I'm using only 2 images. Also I have to call the renderHTML() function. You need to call this function with getImages.onload I hope it works for you.

Although Im using

 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>

How to add image from JSON array onto HTML5 canvas

Question

1 answers

solution1
0 ACCPTED 2018-10-15 09:27:06

How to add image from JSON array onto HTML5 canvas

Question

1 answers

solution1 0 ACCPTED 2018-10-15 09:27:06

solution1
0 ACCPTED 2018-10-15 09:27:06