Drop
Drag an image file onto the canvas to see it displayed.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
function setup() {
// create canvas
const c = createCanvas(710, 400);
background(100);
// Add an event for when a file is dropped onto the canvas
c.drop(gotFile);
}
function draw() {
fill(255);
noStroke();
textSize(24);
textAlign(CENTER);
text('Drag an image file onto the canvas.', width / 2, height / 2);
noLoop();
}
function gotFile(file) {
// If it's an image file
if (file.type === 'image') {
// Create an image DOM element but don't show it
const img = createImg(file.data).hide();
// Draw the image onto the canvas
image(img, 0, 0, width, height);
} else {
console.log('Not an image file!');
}
}
