js（jquery-weui）前端压缩图片以及上传，python后台处理保存图片

蔚落 2022-02-20 07:27 325阅读 0赞

此demo为大于1M对图片进行压缩上传（[纯js的质量压缩，非长宽压缩)][js]

若小于1M则原图上传，可以根据自己实际需求更改。

demo源码如下：

<!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
        <title>图片压缩上传</title>
        <link rel="stylesheet" href="../../static/css/weui.css"/>
        <link rel="stylesheet" href="../../static/css/example.css"/>
        <link rel="stylesheet" href="../../static/css/jquery-weui.css"/>
    
        <script src="../../static/js/example.js"></script>
        <script src="../../static/js/weui.min.js"></script>
    
    
    </head>
    
    <body>
    
        <div class="page">
    
                    <div class="weui-gallery" id="gallery">
                <span class="weui-gallery__img" id="galleryImg"></span>
                <div class="weui-gallery__opr">
                    <a href="javascript:" class="weui-gallery__del">
                        <i class="weui-icon-delete weui-icon_gallery-delete"></i>
                    </a>
                </div>
            </div>
    
            <div class="weui-cells">
    
                 <div class="weui-cell">
                <div class="weui-cell__bd">
                    <p>
                         <span  id="" class="photo">我的照片 </span>
                        <ul class="weui-uploader__files" id="uploaderFiles" style="margin-top: 10px; display: none"></ul>
                        <div class="weui-uploader__input-box" style="margin-top: 10px">
                     <input id="uploaderInput" class="weui-uploader__input zjxfjs_file" type="file" accept="image/*" multiple="">
                  </div>
                    </p>
                 </div>
                </div>
    
                    </div>
            <div class="weui-btn-area">
           <a href="javascript:" class="weui-btn   weui-btn_primary" id="finish">上传</a>
        </div>
        </div>
    
    
    </body>
    </html>
    <script src="../../static/js/zepto.min.js"></script>
    <script type="text/javascript" src="../../static/js/mui.min.js"></script>
     <script type="text/javascript" src="../../static/js/jquery-2.2.4.min.js"></script>
     <script type="text/javascript" src="../../static/js/jquery-weui.js"></script>
    
    <script type="text/javascript">
        mui.init();
    
        $(function () {
                var uid = $('.userid').attr('id');
                $gallery = $("#gallery");
                $galleryImg = $("#galleryImg");
                $uploaderInput = $("#uploaderInput");
                $uploaderFiles = $("#uploaderFiles");
    
               $uploaderInput.on("change", function(e) {
                      var src, url = window.URL || window.webkitURL || window.mozURL,
                    files = e.target.files;
                    for(var i = 0, len = files.length; i < len; ++i) {
                        var file = files[i];
                        if (url) {
                            src = url.createObjectURL(file);
                        } else {
                            src = e.target.result;
                        }
    
                        $("#finish").attr("disabled",true).css("pointer-events","none");
                        var tmpl = '<li class="weui-uploader__file" style="background-image:url(#url#);"></li>';
                        $('.weui-uploader__input-box').hide();
                        $uploaderFiles.show().append(tmpl.replace('#url#', src));
    
                        var Msize = (file.size/(1024*1024)).toFixed(2);
                        if(Msize > 1){
                               photoCompress(file, {
                                   quality: 0.1
                             }, function(base64Codes){
                            var bl = convertBase64UrlToBlob(base64Codes);
                              var formData = new FormData();
                                 formData.append('uid', uid);
                                 formData.append('uploadImage', bl);
                                $.showLoading("上传中");
                                 $.ajax({
                                            type:"POST",
                                            url: '{
       { url_for('cp.upload_image') }}',
                                            data:formData,
                                            dataType:'json',
                                            contentType: false,
                                            processData: false,
                                            timeout: 7000,
                                            cache:false,
                                            success: function(data) {
                                                $.hideLoading();
                                            },
                                            error: function() {
                                                $.hideLoading();
                                                $.toast('换张图片试试吧', "forbidden");
                                                 $uploaderFiles.hide().find("li").eq(0).remove();
                                            $('.weui-uploader__input-box').show();
                                            }
    
                                        });
    
                        });
                        }
    
                        else {
                             upload_file =  $uploaderInput[0].files[0];
                             var formData = new FormData();
                             formData.append('uid', uid);
                             formData.append('uploadImage', upload_file);
                             $.showLoading("上传中");
                             $.ajax({
                                        type:"POST",
                                        url: '{
       { url_for('cp.upload_image') }}',
                                        data:formData,
                                        dataType:'json',
                                        contentType: false,
                                        processData: false,
                                        timeout: 7000,
                                        cache:false,
                                        success: function(data) {
                                            $.hideLoading();
                                        },
                                        error: function() {
                                            $.hideLoading();
                                            $.toast('换张图片试试吧', "forbidden");
                                             $uploaderFiles.hide().find("li").eq(0).remove();
                                            $('.weui-uploader__input-box').show();
                                        }
    
                                    });
                        }
    
    
    
                    }
                });
    
               //预览图片
            $uploaderFiles.on("click", "li", function() {
                $galleryImg.attr("style", this.getAttribute("style"));
                $gallery.fadeIn(100);
            });
            $gallery.on("click", function() {
                $gallery.fadeOut(100);
            });
    
            //删除图片
                $(".weui-gallery__del").click(function() {
                    var index = $(this).index();
                    $uploaderFiles.hide().find("li").eq(index).remove();
                    $('.weui-uploader__input-box').show();
                     $('.photo').attr("id", "");
                });
    
            // 提交
             $('#finish').on("click", function () {
                 var sign = $("#sign").val().trim();
                 var image_url = $('.photo').attr('id');
                 var has_image = $("#uploaderFiles").css('display');
                 if(sign.length === 0 || has_image === 'none'){
                     $.toast("还没填完呢", "forbidden");
                     return false;
                 }
    
                 var formData = new FormData();
                 var status = $('.page').attr('id');
                 formData.append('status', status);
                 formData.append('uid', uid);
                 formData.append('sign', sign);
                 formData.append('photo', image_url);
                 $.showLoading("存档中");
                 $.ajax({
                            type:"POST",
                            url: '{
       { url_for('cp.supply') }}',
                            data:formData,
                            dataType:'json',
                            contentType: false,
                            processData: false,
                            timeout: 5000,
                            cache:false,
                            success: function(data) {
                                $.hideLoading();
                                $.toast('已保存');
                                location.href = "{
       { url_for('cp.join_success') }}"
                            },
                            error: function() {
                                $.hideLoading();
                                $.toast('服务繁忙', "forbidden");
                            }
    
                        });
    
             })
    
    
        });
    
         /*
            三个参数
            file：一个是文件(类型是图片格式)，
            w：一个是文件压缩的后宽度，宽度越小，字节越小
            objDiv：一个是容器或者回调函数
            photoCompress()
             */
            function photoCompress(file,w,objDiv){
                var ready=new FileReader();
                ready.readAsDataURL(file);
                ready.onload=function(){
                    var re=this.result;
                    canvasDataURL(re,w,objDiv)
                }
            }
    
    
    
        function canvasDataURL(path, obj, callback){
                var img = new Image();
                img.src = path;
                img.onload = function(){
                    var that = this;
                    // 默认按比例压缩
                    var w = that.width,
                        h = that.height,
                        scale = w / h;
                    {#w = obj.width || w;#}
                    {#h = obj.height || (w / scale);#}
                    var quality = 0.1;  // 默认图片质量为0.7
                    //生成canvas
                    var canvas = document.createElement('canvas');
                    var ctx = canvas.getContext('2d');
                    // 创建属性节点
                    var anw = document.createAttribute("width");
                    anw.nodeValue = w;
                    var anh = document.createAttribute("height");
                    anh.nodeValue = h;
                    canvas.setAttributeNode(anw);
                    canvas.setAttributeNode(anh);
                    ctx.drawImage(that, 0, 0, w, h);
                    // 图像质量
                    if(obj.quality && obj.quality <= 1 && obj.quality > 0){
                        quality = obj.quality;
                    }
                    // quality值越小，所绘制出的图像越模糊
                    var base64 = canvas.toDataURL('image/jpeg', quality);
                    // 回调函数返回base64的值
                    callback(base64);
                }
            }
            /**
             * 将以base64的图片url数据转换为Blob
             * @param urlData
             *            用url方式表示的base64图片数据
             */
            function convertBase64UrlToBlob(urlData){
                var arr = urlData.split(','), mime = arr[0].match(/:(.*?);/)[1],
                    bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
                while(n--){
                    u8arr[n] = bstr.charCodeAt(n);
                }
                return new Blob([u8arr], {type:mime});
            }
    
    
    
        </script>

python3 后台保存图片至服务器demo:

@cp.route('/upload_image', methods=["POST"])
    def upload_image():
        if request.method == 'POST':
            uid = request.form.get('uid')
            image = request.files['uploadImage']
            image_index = uid + str(time.time()).split('.')[0] + secure_filename(image.filename)
            upload_path = os.path.join('./app/static/upload_images/', image_index)
            image.save(upload_path)
            image_url = upload_path.lstrip('./app/static/')
            return jsonify({'data': image_url})

参考原文：

[https://www.cnblogs.com/007sx/p/7583202.html][js]

[js]: https://www.cnblogs.com/007sx/p/7583202.html