StudyBuddy/TEST.html at main · IamLotlot/StudyBuddy · GitHub

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
31
32
33
34
35
36
37
38
39
40
41
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Canvas to File Input</title>
</head>
<body>

<canvas id="myCanvas" width="400" height="200" style="border:1px solid #000;"></canvas>
<input type="file" id="fileInput">
<button id="downloadBtn">Download Image</button>

<script>
var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');
var fileInput = document.getElementById('fileInput');
var downloadBtn = document.getElementById('downloadBtn');

// Drawing on the canvas
ctx.fillStyle = 'blue';
ctx.fillRect(10, 10, 100, 100);

// Handling download button click
downloadBtn.addEventListener('click', function() {
    // Get the data URL of the canvas
    var canvasDataUrl = canvas.toDataURL('image/png');

    // Create a new file input
    var newFileInput = document.createElement('input');
    newFileInput.type = 'file';
    newFileInput.name = 'uploadedImage'; // Set the name if you are submitting this in a form
    newFileInput.value = canvasDataUrl;

    // Replace the existing file input with the new one
    fileInput.parentNode.replaceChild(newFileInput, fileInput);
});
</script>

</body>
</html>