图片压缩上传

图片压缩上传

 imgUpload: function () {
            var that = this;
             var eleFile = document.querySelector('#upload');

            // 压缩图片需要的一些元素和对象
            var reader = new FileReader(), img = new Image();
            
            // 选择的文件对象
            var file = null;
            
            // 缩放图片需要的canvas
            var canvas = document.createElement('canvas');
            var context = canvas.getContext('2d');
            // base64地址图片加载完毕后
            img.onload = function () {
                // 图片原始尺寸
                var originWidth = this.width;
                var originHeight = this.height;
                // 最大尺寸限制
                var maxWidth = 200, maxHeight = 200;
                // 目标尺寸
                var targetWidth = originWidth, targetHeight = originHeight;
                // 图片尺寸超过400x400的限制
                if (originWidth > maxWidth || originHeight > maxHeight) {
                    if (originWidth / originHeight > maxWidth / maxHeight) {
                        // 更宽，按照宽度限定尺寸
                        targetWidth = maxWidth;
                        targetHeight = Math.round(maxWidth * (originHeight / originWidth));
                    } else {
                        targetHeight = maxHeight;
                        targetWidth = Math.round(maxHeight * (originWidth / originHeight));
                    }
                }
                    
                // canvas对图片进行缩放
                canvas.width = targetWidth;
                canvas.height = targetHeight;
                // 清除画布
                context.clearRect(0, 0, targetWidth, targetHeight);
                // 图片压缩
                context.drawImage(img, 0, 0, targetWidth, targetHeight);
                // canvas转为blob并上传
                canvas.toBlob(function (blob) {
                    // 开始上传
                    let files = new window.File([blob], file.name, {type: file.type})//将blob文件转换file 文件
                    var formData = new FormData();
                    formData.append('files', files);
                    formData.append('uploadtype', '1');
                    try {
                         fileRequsestSer.post('../'+camEmotion.upLoad, formData).then(function (data) {
                            if (data.meta.success) {
                                
                                that.studentInfo.headimgurl = data.data.webUrl;
                                that.imgUrl = data.data.webUrl
                                //  $('#face_image').attr('src', data.data.webUrl);
                            
                            } else {
                                alert(data.meta.message)
                            }
                            $(".headimg").val('');
                        }, function (data) {
                            $(".headimg").val('');
                        });
                    } catch (e) {
                        $(".headimg").val('');
                        that.error.errorStatus = true;
                        that.error.errorMsg = "上传图片失败，请稍后重试！";
                        deferred.reject();
                    }
                    // xhr.open("POST", 'upload.php', true);
                    // xhr.send(blob);    
                }, file.type || 'image/png');
            };
            
            // 文件base64化，以便获知图片原始尺寸
            reader.onload = function(e) {
                img.src = e.target.result;
            };
            eleFile.addEventListener('change', function (event) {
                file = event.target.files[0];
                // 选择的文件是图片
                if (file.type.indexOf("image") == 0) {
                    reader.readAsDataURL(file);    
                }
            });
        },