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> | |
<div> | |
<input type="file" id="imageInput" accept = "image/*"> | |
<canvas id= "myCanvas" width="1000" height="700"></canvas> | |
</div> | |
</body> | |
</html> |
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> | |
reader.onloadend = function (e) { | |
var myImage = new Image(); // Creates image object | |
myImage.src = e.target.result; // Assigns converted image to image object | |
myImage.onload = function(ev) { | |
var myCanvas = document.getElementById("myCanvas"); // Creates a canvas object | |
var myContext = myCanvas.getContext("2d"); // Creates a contect object | |
myCanvas.width = myImage.width; // Assigns image's width to canvas | |
myCanvas.height = myImage.height; // Assigns image's height to canvas | |
myContext.drawImage(myImage,0,0); // Draws the image on canvas |
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
<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
<!-- 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> | |
myCanvas.width="750"; | |
myCanvas.height="500"; | |
</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> |