从2D数组创建图像文件-JavaScript

Creating image files from a 2D array - JavaScript

本文关键字：文件 -JavaScript 图像 创建 2D 数组      更新时间：2023-09-26

我想创建一个卡片列表，但它会返回不同的信息，而不是一个容易编号为1-13的扑克牌列表。以棒球运动员和他们的全垒打总数为例，我创建了这个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";
}

在那之后，事情变得一团糟。我的想法是，对于我想要返回的每一条信息，我将使用一个循环来获取2D数组的第一列，使用players[i][#]。我直接从教程中改编的部分看起来是这样的，而且肯定充满了逻辑错误：

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++ ];}

我打算用它做很多事情，但我至少想知道如何生成至少一个文件名为"Barry Bonds LF 73.jpg"的图像，并在我想好其他事情之前将其打印到网页上。有人能给我指正确的方向吗？

从数组元素创建图像的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);
});

或者，您可以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);
});

请注意，上面并没有"创建具有文件名的图像"，它只是创建一个字符串，该字符串分配给<img />元素的src属性；该CCD_ 7应当指向服务器上保持的现有CCD_。

相关文章：