图片的上传压缩

 图片上传

    修改文件上传的默认样式

           <input tye="file"/> 标签有默认样式，而且比较不容易清除。所以，我将元素隐藏掉，仅在页面上显示与之对应的label标签——<label> 标签为 input 元素定义标注（标记）。label 元素不会向用户呈现任何特殊效果。不过，它为鼠标用户改进了可用性。如果您在 label 元素内点击文本，就会触发此控件。就是说，当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上。<label> 标签的 for 属性应当与相关元素的 id 属性相同。

  图片压缩

    将上传的图片以新的尺寸和清晰度重新画到画布中，并将画布的图片以转化为新的base64路径，最后将新的base64的转换为blob对象。再将blob传到后台；

   对于图片上传，我们一般使用formData对象来将数据编译成键值对，以便用XMLHttpRequest来发送数据。在formData中添加数据我使用的是set方法，这样主要是为了避免在不刷新页面的情况下重复提交数据。

  formData.append(key,value)在数据末尾追加数据 ; formData.set(key,value)用来修改设置数据，key的值不存在，会添加一条数据；

 为了图片不变形，选择使用原始比例，基本思路是对input元素添加change事件，当元素改变时，获取到上传的图片的路径，然后创建一个新的Image对象，设置src，在图片加载完成之后，获取原图片的尺寸，创建画布，将画布的宽高设置为原图的宽高尺寸，使用画布画出图片之后，在使用

canva的toDataURL()方法导出清晰度较低的图片base64。canvas.toDataURL(type, encoderOptions);type 可选图片格式，默认为 image/pngencoderOptions 可选在指定图片格式为 image/jpeg 或 image/webp的情况下，可以从 0 到 1 的区间内选择图片的质量。如果超出取值范围，将会使用默认值 0.92 

            function compress(path, callback){

var img = new Image();
            img.src = path;
            img.onload = function(){
                var that = this；
                var w = that.width；
                var h = that.height；
                var canvas = document.createElement('canvas');
                var imgNew = 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);s
                imgNew.drawImage(that, 0, 0, w, h);
                var base64 = canvas.toDataURL('image/jpeg', 0.6);
                // 回调函数，将base64的值转换为blob；
               callback(base64);
            }
        }