JS 读取文件流并压缩图片

发布时间 2023-05-25 09:34:23作者: WantRemake
<input id="uploadify" type="file" onchange="imgUp()" name="uploadify" accept="image/*">

function imgUp() {
        var file = $('#uploadify')[0].files[0];
        var reader = new FileReader();
        var formData = new FormData();
        formData.append('file', file);
        reader.readAsDataURL(file);
        reader.onload = function (e) {
            console.log(e);
            var imgBase64Data = e.target.result;
            dealImage(this.result, { width: 200 }, function (base) {
                //document.getElementById('img').setAttribute('src', base);
                imgBase64Data = base;
                console.log(imgBase64Data);
                var imgsrc = base;
                var head = imgBase64Data.indexOf("4") + 2;
                imgBase64Data = imgBase64Data.substring(head, imgBase64Data.length - head);
                // 将字符串总的+替换成"%2B" 防止变成空格
                var reg = new RegExp("\\+", "g");
                imgBase64Data = imgBase64Data.replace(reg, "%2B");

                formData.append('imgBase64Data', imgsrc);
                $.ajax({
                    url: "",
                    type: "post",
                    data: formData,
                    contentType: false,
                    processData: false,
                    mimeType: "multipart/form-data",
                    success: function (data) {
                        var jsondata = $.parseJSON(data);

                        $(".imgbox").html('<img style="height:0.8rem"  src="' + imgsrc + '">');
                        $("#hiddenFaceImg").val(jsondata.filename);
                    },
                    error: function (data) {
                        alert("图片上传失败");
                    }
                });
            });
        }
    }


 /**
   * 图片压缩,默认同比例压缩
   * @param {Object} path
   * pc端传入的路径可以为相对路径,但是在移动端上必须传入的路径是照相图片储存的绝对路径
   * @param {Object} obj
   * obj 对象 有 width, height, quality(0-1)
   * @param {Object} callback
   * 回调函数有一个参数,base64的字符串数据
   */
    function dealImage(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.7; // 默认图片质量为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);
        }
    }