js 实现图片压缩并转换成base64(data:image/jpeg;base64)格式

最新推荐文章于 2024-03-23 17:56:09 发布

转载最新推荐文章于 2024-03-23 17:56:09 发布 · 566 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/final-elysion/p/6092675.html

文章标签：

#javascript #ViewUI

本文介绍了一种使用JavaScript实现的图片压缩及转换成Base64编码的方法。通过调整图片尺寸和压缩率，可以有效地减少图片文件大小，适用于网页上传图片等场景。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html>
  <head>
    <!--by 0o晓月メ http://www.cnblogs.com/final-elysion/p/6092675.html-->
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
    <title>compress pic to base64</title>
 
    <script type="text/javascript">
        function uploadBtnClick(){
            var scope = this;
            // change pic to base64
            if(window.File && window.FileReader && window.FileList && window.Blob){ 
                //For Ext :
                //var filefield = me.down('filefield'),
                //    file = filefield.fileInputEl.dom.files[0];    
                var filefield = document.getElementById('fileToUpload'),
                    file = filefield.files[0];
                    
                var compressValue = document.getElementById('compressValue');
                processfile(file,compressValue,uploadCompressFile,scope);
            }else{
                alert("Upload picture is not fully supported in this browser");
            }

        }


        function processfile(file,compressValue,uploadCompressFile,scope) {
            var reader = new FileReader();
            reader.onload = function (event) {
                var blob = new Blob([event.target.result]); 
                
                window.URL = window.URL || window.webkitURL;
                var blobURL = window.URL.createObjectURL(blob); 
                
                var image = new Image();
                image.src = blobURL;
                image.onload = function() {
                    var resized = resizeMe(image); 
                    compressValue.value = resized;
                    uploadCompressFile.apply(scope);
                }
            };
            reader.readAsArrayBuffer(file);
        }

        function resizeMe(img) {
            //压缩的大小
            var max_width =1024; 
            var max_height =768; 

            var canvas = document.createElement('canvas');
            var width = img.width;
            var height = img.height;

            if(width > height) {
                if(width > max_width) {
                    height = Math.round(height *= max_width / width);
                    width = max_width;
                }
            } 
            else{
                if(height > max_height) {
                    width = Math.round(width *= max_height / height);
                    height = max_height;
                }
            }
          
            canvas.width = width;
            canvas.height = height;
          
            var ctx = canvas.getContext("2d");
            ctx.drawImage(img, 0, 0, width, height);
            //压缩率
            return canvas.toDataURL("image/jpeg",0.7); 
        }

        // call back 
        function uploadCompressFile(){
            //do ajax upload
            document.getElementById('displayValue').innerHTML  = document.getElementById('compressValue').value;
        }
    </script>

   
  </head>

    <body >
        <input type="file" name="fileToUpload" id="fileToUpload"/> <br />
        <input type="text" name="compressValue" id="compressValue" style="display:none;" /><br/>
        <input type="button" onclick="uploadBtnClick()" value="上存" /><br/>
        <div id='displayValue' style="word-spacing: normal;word-wrap: break-word;"></div>

    </body>
</html>

转载于:https://www.cnblogs.com/final-elysion/p/6092675.html