时间戳

首页 > 解决方案 > 如何将 JSON 数组中的图像添加到 HTML5 画布上

javascript - 如何将 JSON 数组中的图像添加到 HTML5 画布上

问题描述

我正在尝试创建一个幻灯片，其中图像托管在外部 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);
};
};

我知道我错了，但不知道如何解决它。

标签： javascripthtmljsoncanvashtml5-canvas

解决方案

对于演示，我将您的数据用作变量。此外，我只使用 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>

推荐阅读