39 lines
1.1 KiB
HTML
39 lines
1.1 KiB
HTML
<!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>
|