p5.js |保存（）函数

p5.js 中的save()函数用于通过提示下载到计算机来保存到文件系统。此函数可用于保存文本、图像、JSON、CSV、wav 或 HTML 文件。默认选项是将当前画布保存为图像。
该函数的第一个参数可以根据要保存的文件指定各种值。示例包括指向画布元素的指针、字符串数组、JSON 对象或数组、用于表格的 p5.Table 元素、用于图像的 p5.Image 元素或用于声音的 p5.SoundFile 元素。
注意：不建议在 draw() 循环中调用此函数，因为它会在每次绘制调用时提示一个新的保存对话框。

句法：

save( [objectOrFilename], [filename], [options] )

参数：此函数接受三个参数，如上所述和如下所述。

• objectOrFilename：这是一个对象或字符串，用于表示要保存的对象或文件名（如果保存画布）。如果提供了对象，它将根据对象和文件名保存文件。它是一个可选参数。
• 文件名：它指定用作保存文件的文件名的字符串。它是一个可选参数。
• options：它是一个布尔值或字符串，它为要保存的文件提供附加选项。对于 JSON 文件，“true”值将保存针对文件大小优化的 JSON，而不是可读性。它是一个可选参数。

以下示例说明了 p5.js 中的save()函数：
示例 1：

javascript

function setup() {
  createCanvas(500, 300);
  textSize(18);
 
  background("lightgreen");
  text("Click on the buttons below to save different types of files", 20, 20);
 
  // Create a button for saving text
  saveTextBtn = createButton("Save Text");
  saveTextBtn.position(30, 60);
  saveTextBtn.mousePressed(saveAsText);
 
  // Create a button for saving canvas image
  saveImageBtn = createButton("Save Canvas");
  saveImageBtn.position(150, 60);
  saveImageBtn.mousePressed(saveAsCanvas);
 
  // Create a button for saving JSON
  saveJSONBtn = createButton("Save JSON");
  saveJSONBtn.position(30, 100);
  saveJSONBtn.mousePressed(saveAsJSON);
 
  // Create a button for saving CSV
  saveCSVBtn = createButton("Save CSV");
  saveCSVBtn.position(150, 100);
  saveCSVBtn.mousePressed(saveAsCSV);
}
 
function saveAsText() {
  let textToSave = ["Hello", "GeeksforGeeks!"];
  save(textToSave, "output_text.txt");
}
 
function saveAsCanvas() {
  save("output_canvas.png");
}
 
function saveAsJSON() {
  let exampleObj = [
    {
      name: "Samuel",
      age: 23,
    },
    {
      name: "Axel",
      age: 15,
    },
  ];
  save(exampleObj, "output_text.json");
}
 
function saveAsCSV() {
  let exampleTable = new p5.Table();
  let newRow = exampleTable.addRow();
  exampleTable.addColumn("author");
  exampleTable.addColumn("language");
  newRow.setString("author", "Dennis Ritchie");
  newRow.setString("language", "C");
 
  save(exampleTable, "output_CSV.csv");
}

输出：

示例 2：

javascript

function setup() {
  createCanvas(500, 300);
  textSize(22);
 
  text("Click on the button below to save the written text", 20, 20);
 
  // Create a textarea for the input of text
  inputArea = createElement("textarea");
  inputArea.position(30, 50);
  inputArea.size(400, 120);
 
  // Create a button for saving text
  saveBtn = createButton("Save text to file");
  saveBtn.position(30, 200);
  saveBtn.mousePressed(saveFile);
}
 
function saveFile() {
  // Get the value of the textarea
  // Split according to nextline characters
  stringList = inputArea.value().split("\n");
 
  // Save the strings to file
  save(stringList, "output_file.txt");
}

输出：

在线编辑器： https://editor.p5js.org/
环境设置： https://www.geeksforgeeks.org/p5-js-soundfile-object-installation-and-methods/
参考： https://p5js.org/reference/#/p5/save