[英]How to add image from JSON array onto HTML5 canvas
我正在嘗試創建幻燈片演示,其中將圖像托管在外部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);
};
};
我知道我做錯了,但不知道如何解決。
對於演示,我將您的數據用作變量。 另外,我只使用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>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.