图片压缩上传

实现图片压缩后上传，判断图片的大小，如果超过多少就等比缩放，然后canvas重新画出来。（这段脚本是参考别人的来写的）
脚本还不够成熟，还需要完善，也请大神看看哪里有问题给点意见，谢谢！（或者如果谁有更好的压缩方式，也请提供一起学习~）
还可以参考：https://blog.youkuaiyun.com/ityang521/article/details/70667037

html代码截图： （看我划的重点即可，其他类名是框架的可以忽略）

js代码截图：

附加说明：convertBase64UrlToBlob()方法是将base64编码的图片转换为二进制数据，atob() 对用base-64编码过的字符串进行解码 ，Blob 对象表示一个不可变、原始数据的类文件对象。下面的应用就是：新建了一个文件，赋值给了uploadFile（可以传送给后台）。
即：可以输出base64编码的图片数据，也可以用这个方法输出blob文件对象，然后发送到后台，如果后台不需要blob文件对象，则完全可以去掉该方法。base64编码数据比blob文件要大一些，在小系统中用base64编码数据也ok。

js代码复制区：

/* 
        * 图片压缩
        * img    原始图片
        * width   压缩后的宽度
        * height  压缩后的高度
        * ratio   压缩比率 
        */
        function compress(img, width, height, ratio) {        
            var canvas, ctx, img64;
            canvas = document.createElement('canvas');        
            canvas.width = width;
            canvas.height = height;
                //创建一个画布
            ctx = canvas.getContext("2d");        
            ctx.drawImage(img, 0, 0, width, height);
            img64 = canvas.toDataURL("image/jpeg", ratio);
            return img64;
        }

        /**  
         * 将以base64的图片url数据转换为Blob  
         * @param urlData  
         *            用url方式表示的base64图片数据  
         */  
        function convertBase64UrlToBlob(urlData){  

            var bytes=window.atob(urlData.split(',')[1]);        //去掉url的头，并转换为byte  

            //处理异常,将ascii码小于0的转换为大于0  
            var ab = new ArrayBuffer(bytes.length);  
            var ia = new Uint8Array(ab);  
            for (var i = 0; i < bytes.length; i++) {  
                ia[i] = bytes.charCodeAt(i);  
            }  
            return new Blob( [ab] , { type : 'image/jpeg'});  
        }  

        var uploadFile = null;

        function AddCallImage() {
            var docObj = document.getElementById("add-call-upfile");
            var imgObjPreview = document.getElementById("add-call-upimg");
            var image = new Image();
            if(docObj.files && docObj.files[0]) {
                image.src =  window.URL.createObjectURL(docObj.files[0]);
                var imgSize=(docObj.files[0]).size/1024;
                if(imgSize>200||image.width>1024||image.height>1024){
                    image.onload = function(){
                        var width = image.width;
                        var height = image.height;
                        var max =  Math.max(width, height);
                        var max_wh = max<1440 && imgSize>500 ? 1024 : 1440; 
                        if(width > height) {
                            if(width > max_wh) {
                                height = Math.round(height *= max_wh / width);
                                width = max_wh;
                            }
                        }else{
                            if(height > max_wh) {
                                width = Math.round(width *= max_wh / height);
                                height = max_wh;
                            }
                        }
                        var img64 = compress(image, width, height, 0.9);
                        imgObjPreview.src = img64;
                        $(imgObjPreview).show();
                        uploadFile = new File([convertBase64UrlToBlob(img64)], docObj.files[0].name, { type : 'image/jpeg'});
                    }
                }else{
                    uploadFile = docObj.files[0];
                    imgObjPreview.src = window.URL.createObjectURL(docObj.files[0]);
                    $(imgObjPreview).show();
                }
            }
        }