This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<div> | |
<input type="file" id="imageInput" accept = "image/*"> | |
<canvas id= "myCanvas" width="1000" height="700"></canvas> | |
</div> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<script> | |
if(e.target.files) { | |
let imageFile = e.target.files[0]; //here we get the image file | |
var reader = new FileReader(); | |
reader.readAsDataURL(imageFile); | |
reader.onloadend = function (e) { | |
// Converted image is available here. | |
} | |
} | |
</script> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<script> | |
let imgInput = document.getElementById('imageInput'); | |
imgInput.addEventListener('change', function(e) { | |
// Rest of the code appears here | |
}); | |
</script> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!-- HTML --> | |
<html> | |
<body> | |
<canvas id="myCanvas" width="750" height="500">your canvas loads here</canvas> | |
</body> | |
</html> | |
<!-- Javascript --> | |
<script> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<script> | |
var myImage=new Image(); | |
myImage.src="https://images.unsplash.com/photo-1572800578930-fd1013b506c1?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=750&q=80"; | |
myImage.onload=function(){ | |
myContext.drawImage(myImage,0,0,myCanvas.width,myCanvas.height); | |
}; | |
</script> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<script> | |
myCanvas.width="750"; | |
myCanvas.height="500"; | |
</script> |