JavaScript canvas to load pictures

This article shares the specific code of JavaScript canvas to load pictures for your reference. The specific content is as follows

Code:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Using image</title>
        <style type="text/css">
            * {
                /* margin: 0;
                padding: 0; */
                box-sizing: border-box;
            }
            canvas {
                border-width: 1px;
                border-color: #000000;
                border-style: solid;
            }
        </style>
    </head>
    <body>
        <canvas id="canvas"></canvas>
        
        <div>
            <input type="file" accept="image/*" />
        </div>
        
        <script type="text/javascript">
            window.onload = (event) => {
                main()
            }
            
            function main() {
                const canvas = document.getElementById("canvas");
                const ctx = canvas.getContext("2d");
                
                const inputFile = document.querySelector("input[type=file]");
                inputFile.onchange = (event) => {
                    const files = event.target.files;
                    if (files.length > 0) {
                        const file = files[0]; // First file
                        console.log(file);
                        
                        const image = new Image();
                        image.src = URL.createObjectURL(file);
                        image.onload = function(event) {
                            // console.log(event, this);
                            URL.revokeObjectURL(this.src);
                            
                            canvas.width = image.width;
                            canvas.height = image.height;
                            
                            ctx.drawImage(image, 0, 0);
                        }
                    }
                }
            }
        </script>
    </body>
</html>

Reference: Link

The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM.

You may also be interested in:

js+HTML5 canvas to implement a simple loading bar (progress bar) function example
JS implements preloading of video audio/video to obtain screenshots (return canvas screenshots)
JS Canvas timer simulates dynamic loading animation
JavaScript to achieve web page loading progress bar code is super simple
JavaScript implements a web page loading progress loading
Simple implementation of js progress bar loading effect
Native JS to achieve home page progress loading animation
pace.js page loading progress bar plugin
JavaScript to implement page loading progress bar code
JavaScript canvas realizes water ball loading animation

<<: Introduction to ufw firewall in Linux

>>: Detailed explanation of MySQL event modification events (ALTER EVENT), disabling events (DISABLE), enabling events (ENABLE), event renaming and database event migration operations