canvas压缩图片

最新推荐文章于 2020-10-19 17:32:41 发布

渣渣前端

最新推荐文章于 2020-10-19 17:32:41 发布

阅读量204

点赞数

分类专栏：前端文章标签： html5

本文链接：https://blog.csdn.net/dtbk123/article/details/104333557

版权

前端专栏收录该内容

74 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div class="box">
        <input type='file'>
       <img src="">
        <canvas></canvas>
    </div>
    <script>
        var input=document.getElementsByTagName('input')[0];
       var img=document.getElementsByTagName('img')[0];
        var canvas=document.getElementsByTagName('canvas')[0];
        var ctx=canvas.getContext('2d');

        input.onchange=function(e){
           var read=new FileReader();
            read.readAsDataURL(this.files[0]);
            read.onload=function(){
               img.src=this.result
             
            }
            
            img.onload=function(){
                if(img.offsetWidth>500){
                    var x=img.offsetWidth/img.offsetHeight;
                    ctx.drawImage(img,0,0,300,300/x)
                  var url=canvas.toDataURL()
                }

            }
        }

    </script>
</body>
</html>