原生demo：上传图片-File转换为Image,File转换为canvas,canvas转换为图片

最新推荐文章于 2023-04-29 19:31:41 发布

hang499

最新推荐文章于 2023-04-29 19:31:41 发布

阅读量921

点赞数 1

分类专栏： canvas web

原文链接：https://blog.csdn.net/sinat_36146776/article/details/80214543

版权

web 同时被 2 个专栏收录

12 篇文章 0 订阅

订阅专栏

canvas

1 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <style type="text/css">
            #canvas{
                border:1px solid red;
                width:300px;
                height:300px;
            }
            #img>img{
                border:1px solid pink;
                width:400px;
                height:400px;
            }
        </style>
    </head>
    <body>
        <input type="file" οnchange="getFile(this.files)" />
        <div>
            <canvas id="canvas"></canvas>
        </div>
        <div id="img">
            <img src="" alt="显示图片" />
        </div>
    </body>
    <script type="text/javascript">
 
        var getFile = function(file){
            var inputfile = file[0];
            fileToCanvas(inputfile);
            fileToImage(inputfile);
        }
 
        function fileToImage(file){
            var reader = new FileReader();
            reader.readAsDataURL(file);//读取图像文件 result 为 DataURL, DataURL 可直接 赋值给 img.src
            reader.onload = function(event){
                var img = document.getElementById("img").children[0];
                img.src = event.target.result;//base64
            }
        }
 
 
 
        function fileToCanvas(file){
            var reader = new FileReader();
            reader.readAsDataURL(file);//读取图像文件 result 为 DataURL, DataURL 可直接 赋值给 img.src
            reader.onload = function(event){
                var image = new Image();
                image.src = event.target.result;
                image.onload = function(){
                    var canvas = document.getElementById("canvas");
                    var imageCanvas = canvas.getContext("2d");
                    imageCanvas.drawImage(image, 0, 0,300,300);
                    canvasToImage(canvas);
                }
            }
        }
 
 
        function canvasToImage(canvas){
            var image = new Image();
            image.src = canvas.toDataURL("image/png");//base64
        }
        
        
    </script>
</html>

hang499

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
原生demo：上传图片-File转换为Image,File转换为canvas,canvas转换为图片

<!DOCTYPE html><html lang="en"> <head> <meta charset="utf-8"> <style type="text/css"> #canvas{ border:1px solid red; width:300px; height:300px;
复制链接

扫一扫