Skip to content

Instantly share code, notes, and snippets.

View john92paul's full-sized avatar
🌱
Kill them with your success, Bury them with your smile

John Paul john92paul

🌱
Kill them with your success, Bury them with your smile
View GitHub Profile
/* Button css */
#button-3 .knobs:before{content: '';position: absolute;top: 4px;left: 4px;width: 20px;height: 10px;color: #fff;font-size: 10px;font-weight: bold;text-align: center;line-height: 1;padding: 9px 4px;background-color: #fff;border-radius: 50%;transition: 0.3s ease all, left 0.3s cubic-bezier(0.18, 0.89, 0.35, 1.15);box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.35), 0 10px 10px -5px rgba(0, 0, 0, 0.20);}
#button-3 .checkbox:active + .knobs:before{width: 46px;border-radius: 100px;}
#button-3 .checkbox:checked:active + .knobs:before{margin-left: -26px;}
#button-3 .checkbox:checked + .knobs:before{content: '';left: 32px;background-color: #fff;}
#button-3 .checkbox:checked ~ .layer{background-color: #17c2bd;}
.knobs, .layer{position: absolute;top: 0;right: 0;bottom: 0;left: 0;}
.button{position: relative;top: 50%;width: 65px;height: 36px;margin: -20px auto 0 auto;overflow: hidden;margin: 0;}
.button.r, .button.r .layer{border-radius: 100px;}
.checkbox{position: relative;width: 100%;height: 100%;padding:
/* Button css */
#button-1 .knobs:before{content: '';position: absolute;top: 4px;left: 4px;width: 20px;height: 10px;color: #fff;font-size: 10px;font-weight: bold;text-align: center;line-height: 1;padding: 9px 4px;background-color: #fff;border-radius: 50%;transition: 0.3s cubic-bezier(0.18, 0.89, 0.35, 1.15) all;box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.35), 0 10px 10px -5px rgba(0, 0, 0, 0.20);}
#button-1 .checkbox:checked + .knobs:before{content: '';left: 32px;background-color: #fff;}
#button-1 .checkbox:checked ~ .layer{background-color: #17c2bd;}
#button-1 .knobs, #button-1 .knobs:before, #button-1 .layer{transition: 0.3s ease all;}
.knobs, .layer{position: absolute;top: 0;right: 0;bottom: 0;left: 0;}
.button{position: relative;top: 50%;width: 65px;height: 36px;margin: -20px auto 0 auto;overflow: hidden;margin: 0;}
.button.r, .button.r .layer{border-radius: 100px;}
.checkbox{position: relative;width: 100%;height: 100%;padding: 0;margin: 0;opacity: 0;cursor: pointer;z-index: 3;}
.knobs{z-index: 2;}
<!-- HTML -->
<html>
<body>
<div>
<input type="file" id="imageInput" accept = "image/*">
<canvas id= "myCanvas" width="1000" height="700"></canvas>
</div>
</body>
</html>
<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
<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>
<script>
let imgInput = document.getElementById('imageInput');
imgInput.addEventListener('change', function(e) {
// Rest of the code appears here
});
</script>
<div>
<input type="file" id="imageInput" accept = "image/*">
<canvas id= "myCanvas" width="1000" height="700"></canvas>
</div>
<!-- HTML -->
<html>
<body>
<canvas id="myCanvas" width="750" height="500">your canvas loads here</canvas>
</body>
</html>
<!-- Javascript -->
<script>
<script>
myCanvas.width="750";
myCanvas.height="500";
</script>
<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>