[英]Creating image files from a 2D array - JavaScript
I want to create a list of cards, but instead of a list of playing cards that are easily numbered 1-13, it would return different information. 我想创建一张纸牌列表,但是它会返回不同的信息,而不是轻松编号为1-13的纸牌列表。 Using baseball players and their home run totals as an example, I created this 2D array, a function to create a Player object, and a function to create the image file name: 以棒球运动员及其本垒打总数为例,我创建了这个2D数组,一个用于创建Player对象的函数以及一个用于创建图像文件名的函数:
var players = [
['Barry Bonds', 'LF', 73],
['Mark McGwire', '1B', 70],
['Jean Beliveau', 'RF', 66],
['Roger Maris', 'RF', 61],
]
function Player(name,position,rating) {
this.name = name;
this.position = position;
this.homeruns = homeruns;
this.fname = fname;
}
function fname() {
return "images/" + this.name + " " + this.position + " " + this.rating + ".jpg";
}
After that, it gets messy. 在那之后,它变得凌乱。 My thinking is that I would use a loop to grab the first column of the 2D Array using players[i][#]
for each piece of information I want to return. 我的想法是,对于要返回的每条信息,我将使用players[i][#]
使用循环来捕获2D数组的第一列。 The part I directly adapted from my tutorials looks like this, and it's definitely full of logical mistakes: 我直接从教程中改编的部分看起来像这样,并且肯定充满了逻辑错误:
function list()
this.players = new Array(3);
this.bpa = 0;
for (i=0; i<3; i++) {
this.players[i-1] = new Player(name,position,homeruns)
var name = players[i][0];
var position = players[i][1];
var homeruns = players[i][2];}
this.createList = createList}
function createList() {
return this.players [ this.bpa++ ];}
There's a whole bunch of things I intend to do with this, but I'd at least like to figure out how to generate at least one image with a file name like "Barry Bonds LF 73.jpg" and print it to the web page before I figure out anything else. 我打算做很多事情,但我至少想弄清楚如何生成至少一个文件名如“ Barry Bonds LF 73.jpg”的图像并将其打印到网页上在我找出其他任何东西之前。 Can anyone point me in the right direction here? 有人可以在这里指出正确的方向吗?
To create an image's src
from the elements of your array: 要从数组的元素创建图像的src
,请执行以下操作:
var players = [ ['Barry Bonds', 'LF', 73], ['Mark McGwire', '1B', 70], ['Jean Beliveau', 'RF', 66], ['Roger Maris', 'RF', 61], ], // create an <img> element: image = document.createElement('img'), // an empty variable to be used later: tempClone, // the element to which you want to add the image elements: target = document.body; // iterates over the 'players' array: players.forEach(function (arrayElement) { // arrayElement is the element of the players array over which we're // currently iterating (the name is unimportant, but it's always // the first argument): // cloning the created image, assigning it to created variable: tempClone = image.cloneNode(); // setting the 'src' property to a string, // joining together each of the contents of the array element (with // an empty string, and then replacing any white-space with an empty // string and appending '.jpg': tempClone.src = arrayElement.join('').replace(/\\s+/,'') + '.jpg'; // appending the newly-cloned <img> element to the 'target' parent: target.appendChild(tempClone); });
Or, rather than concatenating strings and then replacing white-space, you could join()
them, and use encodeURIComponent()
to permit and appropriately format the white-space for URLs: 或者,您可以join()
它们,然后使用encodeURIComponent()
来允许并适当地格式化URL的空格,而不是连接字符串然后替换空白:
var players = [ ['Barry Bonds', 'LF', 73], ['Mark McGwire', '1B', 70], ['Jean Beliveau', 'RF', 66], ['Roger Maris', 'RF', 61], ], // create an <img> element: image = document.createElement('img'), // an empty variable to be used later: tempClone, // the element to which you want to add the image elements: target = document.body; // iterates over the 'players' array: players.forEach(function (arrayElement) { // arrayElement is the element of the players array over which we're // currently iterating (the name is unimportant, but it's always // the first argument): // cloning the created image, assigning it to created variable: tempClone = image.cloneNode(); // setting the 'src' property: tempClone.src = encodeURIComponent(arrayElement.join('')+ '.jpg'); // appending the newly-cloned <img> element to the 'target' parent: target.appendChild(tempClone); });
Note that the above does not 'create an image with a filename' it simply creates a string that is allocated to the src
property of an <img />
element; 注意上面的内容不是“用文件名创建图像”,它只是创建一个分配给<img />
元素的src
属性的字符串。 this src
should point to an existing <img />
held on the server. 此src
应该指向服务器上现有的<img />
。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.