js 图片压缩转成base64

Posted 2020-09-29 Damon

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了js 图片压缩转成base64相关的知识，希望对你有一定的参考价值。

<!doctype html>  
<html>  
    <head>  
        <meta charset="UTF-8">  
        <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />  
        <title>测试</title>  
        <link rel="stylesheet" href="./css/index.css" />  
        <link rel="stylesheet" href="./css/index_1.css" />  
        <script type="text/javascript" src="script/jquery.min.js"></script>  
        <script type="text/javascript" src="script/ys.js"></script>  
    </head>  
    <body>  
        <div class="free-upload">  
H5页面            <p>  
                上传您的约会照片，上传图片  
            </p>  
            <div class="free-upload-photo">  
                <span id="photo_img"></span>  
                <input type="file" id="photo" onchange="start_upload(this)"/>  
            </div>  
        </div>  
        <img src="" id="csimg" width="200" height="200"/>  
    </body>  
    <script>  
        function start_upload(obj){  
             if(!isCanvasSupported){  
                console.log("2222");  
             }else{  
                compress(event, function(base64Img){  
                    $("#csimg").attr("src",base64Img);  
                    console.log(base64Img);  
                    // 如需保存  或 把base64转成图片  ajax提交后台处理  
                    // 我这里采用ajax方式 自己封装的   
                    ajax(‘qnl_app/tes_ac_img‘,{‘base64Img‘:base64Img},function(date){  
                        console.log(JSON.stringify(date));  
                    });  
                });  
             }  
        }  
          
    </script>  
</html>

JS:

//判断是否存在画布  
function isCanvasSupported() {  
    var elem = document.createElement(‘canvas‘);  
    return !!(elem.getContext && elem.getContext(‘2d‘));  
}  
  
//压缩方法  
function compress(event, callback) {  
    if ( typeof (FileReader) === ‘undefined‘) {  
        console.log("当前浏览器内核不支持base64图标压缩");  
        //调用上传方式  不压缩  
    } else {  
        try {  
            var file = event.currentTarget.files[0];  
             if(!/image\/\w+/.test(file.type)){     
                    alert("请确保文件为图像类型");    
                    return false;    
             }   
            var reader = new FileReader();  
            reader.onload = function (e) {  
            var image = $(‘<img/>‘);  
            image.load(function () {  
            console.log("开始压缩");  
            var square = 700;  
            var canvas = document.createElement(‘canvas‘);  
            canvas.width = square;  
            canvas.height = square;  
            var context = canvas.getContext(‘2d‘);  
            context.clearRect(0, 0, square, square);  
            var imageWidth;  
            var imageHeight;  
            var offsetX = 0;  
            var offsetY = 0;  
            if (this.width > this.height) {  
              imageWidth = Math.round(square * this.width / this.height);  
              imageHeight = square;  
              offsetX = - Math.round((imageWidth - square) / 2);  
            } else {  
              imageHeight = Math.round(square * this.height / this.width);  
              imageWidth = square;  
              offsetY = - Math.round((imageHeight - square) / 2);  
            }  
            context.drawImage(this, offsetX, offsetY, imageWidth, imageHeight);  
            var data = canvas.toDataURL(‘image/jpeg‘);  
                //压缩完成执行回调  
               callback(data);  
            });  
            image.attr(‘src‘, e.target.result);  
            };  
            reader.readAsDataURL(file);  
        } catch(e) {  
            console.log("压缩失败!");  
            //调用上传方式  不压缩  
        }  
    }  
}

以上是关于js 图片压缩转成base64的主要内容，如果未能解决你的问题，请参考以下文章

JavaScript前端图片压缩

JS图片base64压缩

js压缩上传图片base64长度

html下纯JS实现图片压缩预览图片Base64转换

ios将base64字符串转为图片，点击图片全屏展示

js 压缩图片上传

js 图片压缩 转成base64

js 图片压缩转成base64