P5.js开发之——通过createFileInput向页面中添加文件选择按钮

发表于 2022-01-18 分类于开发， C-前端开发， P5.js 阅读时长 ≈ 1 分钟

一概述

createFileInput语法介绍
示例—通过文件选择按钮选择图片文件并显示图片文件

二 createFileInput语法介绍

2.1 语法

1	createFileInput(callback, [multiple])

2.2 说明

添加一个文件选择按钮
可以级联使用p5.Element的语法

2.3 参数及返回值

参数

参数	说明
callback	文件加载时的回调函数
multiple	可选，允许选择多个文件

返回值

p5.Element

三示例

3.1 代码

let input;
let img;

function setup() {
  input = createFileInput(handleFile);
  input.position(0, 0);
}

function draw() {
  background(255);
  if (img) {
    image(img, 0, 0, width, height);
  }
}

function handleFile(file) {
  print(file);
  if (file.type === 'image') {
    img = createImg(file.data, '');
    img.hide();
  } else {
    img = null;
  }
}

3.2 效果图

四参考

P5.js官方文档—createFileInput

0%