原生js压缩图片

本文转载自查看原文 2017-10-30 15:35 1443

<!DOCTYPE html>
<html>
    <head>
        <meta charset="{CHARSET}">
        <title>图片本地压缩</title>
    </head>
    <body>
        <input type="file" id="file"/>
        <img src="" id="img"/>
        <script>
            var oInput = document.getElementById ( 'file' )
            var oImg = document.getElementById("img");
            oInput.onchange = function(){
                var fileData = oInput.files[ 0 ];
                base64(fileData,function(base64Data){
                    //base64Data:处理成功返回的图片base64
                    oImg.setAttribute("src",base64Data);
                });
            }
            
            function base64(file,backData){
                /*
                 * file:input上传图片
                 * backData：处理完成回调函数
                 * */
                var reader = new FileReader();
                var image = new Image();
                var canvas = createCanvas();
                var ctx = canvas.getContext("2d");
                reader.onload = function(){ // 文件加载完处理
                    var result = this.result;
                    image.onload = function(){ // 图片加载完处理
                        var imgScale = imgScaleW(1000,this.width,this.height);
                        canvas.width = imgScale.width;
                        canvas.height = imgScale.height;
                        ctx.drawImage(image,0,0,imgScale.width,imgScale.height);
                        var dataURL = canvas.toDataURL('image/jpeg'); // 图片base64
                        ctx.clearRect(0,0,imgScale.width,imgScale.height); // 清除画布
                        backData (dataURL); //dataURL:处理成功返回的图片base64
                    }
                    image.src = result;
                };
                reader.readAsDataURL(file);
            }
            
            function createCanvas(){ // 创建画布
                var canvas = document.getElementById('canvas');
                if(!canvas){
                    var canvasTag = document.createElement('canvas');
                    canvasTag.setAttribute('id','canvas');
                    canvasTag.setAttribute('style','display:none;');//隐藏画布
                    document.body.appendChild(canvasTag);
                    canvas = document.getElementById('canvas');
                }
                return canvas;
            }
            
            function imgScaleW(maxWidth,width,height){
                /* maxWidth:宽度或者高度最大值
                 * width：宽度
                 * height：高度
                 * */
                var imgScale = {};
                var w = 0;
                var h = 0;
                if(width <= maxWidth && height <= maxWidth){ // 如果图片宽高都小于限制的最大值,不用缩放
                    imgScale = {
                        width:width,
                        height:height
                    }
                }else{
                    if(width >= height){ // 如果图片宽大于高
                        w = maxWidth;
                        h = Math.ceil(maxWidth * height / width);
                       }else{     // 如果图片高大于宽
                        h = maxWidth;
                        w = Math.ceil(maxWidth * width / height);
                    }
                    imgScale = {
                        width:w,
                        height:h
                    }
                }
                return imgScale;
            }
        </script>
        
    </body>
</html>

免责声明！

本站转载的文章为个人学习借鉴使用，本站对版权不负任何法律责任。如果侵犯了您的隐私权益，请联系本站邮箱yoyou2525@163.com删除。

猜您在找 js压缩图片 uniapp 调用原生压缩图片 js压缩图片上传 js 压缩图片上传前端JS压缩图片 js 压缩图片 H5 html5+js压缩图片上传 base64之js压缩图片 JS通过指定大小来压缩图片 js压缩图片到2m以下