Enable upload of file onto canvas

This commit is contained in:
Johanna Dorothea Reichmann 2019-06-17 21:29:28 +02:00
parent 1844315490
commit 30e6e944d2
Signed by untrusted user who does not match committer: transcaffeine
GPG Key ID: 03624C433676E465
2 changed files with 13 additions and 1 deletions

View File

@ -12,7 +12,7 @@
<canvas id="drawImage"></canvas> <canvas id="drawImage"></canvas>
<label> Color: <input type="color" id="drawColor" /></label> <label> Color: <input type="color" id="drawColor" /></label>
<input type="file" id="fileInput"/>
</body> </body>
</html> </html>

12
main.js
View File

@ -31,5 +31,17 @@ window.onload = () => {
}) })
document.addEventListener('mouseup', () => {drawing = false}) document.addEventListener('mouseup', () => {drawing = false})
const fileInput = document.querySelector("#fileInput")
fileInput.addEventListener("change", () => {
const file = fileInput.files[0]
const reader = new FileReader()
reader.onload = () => {
const img = new Image(drawAreaBounding.width, drawAreaBounding.height)
img.onload = () => drawCtx.drawImage(img, 0, 0)
img.src = reader.result
}
setTimeout(() => reader.readAsDataURL(file), 0)
})
} }