如何将图像从JSON数组添加到HTML5画布
[英]How to add image from JSON array onto HTML5 canvas
问题描述
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. 
我正在尝试创建幻灯片演示，其中将图像托管在外部JSON数组中，然后加载到html页面上，然后插入到HTML5画布上。
So far I am able to load all the images, but cannot add one image from the loaded Json images to the canvas. 到目前为止，我已经能够加载所有图像，但是无法从加载的Json图像中向画布添加一个图像。
HTML: 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: 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);
};
};
I know I am going wrong, but dont know how to fix it. 我知道我做错了，但不知道如何解决。
1 个解决方案
解决方案1
0 已采纳 2018-10-15 09:27:06
For the demo I'm using your data as a variable. 对于演示，我将您的数据用作变量。 Also I'm using only 2 images. 另外，我只使用2张图片。 Also I have to call the renderHTML() function. 另外，我必须调用renderHTML（）函数。 You need to call this function with getImages.onload I hope it works for you. 您需要使用getImages.onload调用此函数，希望它对您有用。
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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.