Delete canvas image uploader
This commit is contained in:
@@ -1,43 +0,0 @@
|
||||
<!doctype html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<title>Canvas HTML5</title>
|
||||
<style>
|
||||
#canvas {
|
||||
border: 1px solid black;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div><label>Image</label>
|
||||
<input type="file" id="imgLoader" name="imgLoader">
|
||||
</div>
|
||||
<div><canvas id="canvas"></canvas></div>
|
||||
<script>
|
||||
const canvas = document.querySelector('#canvas');
|
||||
const ctx = canvas.getContext('2d');
|
||||
const imgLoader = document.querySelector('#imgLoader');
|
||||
imgLoader.addEventListener('change', handleUpload);
|
||||
|
||||
function handleUpload(e) {
|
||||
console.log(e);
|
||||
const reader = new FileReader();
|
||||
reader.onload = function (e) {
|
||||
console.log(e);
|
||||
const img = new Image();
|
||||
img.onload = function () {
|
||||
canvas.width = img.width / 2;
|
||||
canvas.height = img.height / 2;
|
||||
ctx.drawImage(img, 0, 0, img.width / 2, img.height / 2);
|
||||
}
|
||||
img.src = e.target.result;
|
||||
}
|
||||
reader.readAsDataURL(e.target.files[0]);
|
||||
}
|
||||
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
Reference in New Issue
Block a user