JavaScript - canvas - 通过＜input type=“file“ /＞加载图片

好好活着，不要熬夜

已于 2023-09-23 10:40:40 修改

阅读量2.8k

点赞数 1

分类专栏： HTML & CSS & JavaScript 文章标签： JavaScript HTML CSS canvas

于 2021-08-14 18:16:05 首次发布

本文链接：https://blog.csdn.net/qq_29761395/article/details/119704457

版权

HTML & CSS & JavaScript 专栏收录该内容

66 篇文章 1 订阅

订阅专栏

文章目录

参考

在这里插入图片描述

<!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>

参考

Web technology for developers > Web APIs > Canvas API > Canvas tutorial > Using images

好好活着，不要熬夜

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
JavaScript - canvas - 通过＜input type=“file“ /＞加载图片

文章目录参考<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>Using image</title> <style type="text/css"> * { /* margin: 0; padding: 0;
复制链接

扫一扫