Skip to content

Instantly share code, notes, and snippets.

John Paul john92paul

Block or report user

Report or block john92paul

Hide content and notifications from this user.

Learn more about blocking users

Contact Support about this user’s behavior.

Learn more about reporting abuse

Report abuse
View GitHub Profile
View gist:a8d42e246d03d92a1fab73958b25c6a3
<!-- HTML -->
<html>
<body>
<div>
<input type="file" id="imageInput" accept = "image/*">
<canvas id= "myCanvas" width="1000" height="700"></canvas>
</div>
</body>
</html>
View gist:c9371bf54a36d9714422b3549f085727
<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
View gist:e7376d4fe464f6c70a5deaf508c26364
<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>
View gist:6a4f96212bd7dbcbd43d13f642b5e53d
<script>
let imgInput = document.getElementById('imageInput');
imgInput.addEventListener('change', function(e) {
// Rest of the code appears here
});
</script>
View gist:b6080469713acdfac34b6b1caa4e2bde
<div>
<input type="file" id="imageInput" accept = "image/*">
<canvas id= "myCanvas" width="1000" height="700"></canvas>
</div>
View gist:a75a3df1457c39eefc9e103c996045ac
<!-- HTML -->
<html>
<body>
<canvas id="myCanvas" width="750" height="500">your canvas loads here</canvas>
</body>
</html>
<!-- Javascript -->
<script>
View gist:c2fb7fe251e59787c888be6fd2209f74
<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>
View gist:7bca18e814309bc351a42ea721be3fc1
<script>
var myCanvas = document.getElementById("myCanvas");
var myContext = myCanvas.getContext("2d");
</script>
View gist:347b78a0a52ab71b9c81b0acde938579
<body>
<canvas id="myCanvas" width="750" height="500">your canvas loads here</canvas>
</body>
You can’t perform that action at this time.