利用canvas 压缩图片,传递到 服务器

1.取到file文件。

2.将图片压缩

            function processfile(file) {
                            var reader = new FileReader();
                            reader.onload = function (event) {
                                var blob = new Blob([event.target.result]);
                                window.URL = window.URL || window.webkitURL;
                                var blobURL = window.URL.createObjectURL(blob);
                                var image = new Image();
                                image.src = blobURL;
                                image.onload = function() {
                                    var dataUrl= canvasImg(image);//利用画布将文件转换为 返回的是一串Base64编码的URL
                                    uploadFile(resized);//删除服务器
                                }
                            };
                            reader.readAsArrayBuffer(file);
                        }
                        function canvasImg(img) {
                            //压缩的大小
                            var max_width =500;
                            var max_height =500;
                            var canvas = document.createElement('canvas');
                            var width = img.width;
                            var height = img.height;
                            if(width > height) {
                                if(width > max_width) {
                                    height = Math.round(height *= max_width / width);
                                    width = max_width;
                                }
                            }
                            else{
                                if(height > max_height) {
                                    width = Math.round(width *= max_height / height);
                                    height = max_height;
                                }
                            }
                            canvas.width = width;
                            canvas.height = height;
                            var ctx = canvas.getContext("2d");
                            ctx.drawImage(img, 0, 0, width, height);
                            //压缩率
                            return canvas.toDataURL("image/jpeg",0.9);
                        }

3.上传到服务器

            
       //将dataUrl转换为二进制流
       function dataUrlToBlob(dataurl) { var arr = dataurl.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}); } function uploadFile(dataUrl){ var file = dataUrlToBlob(dataUrl);//转换为流 var fd = new FormData();//formdata格式上传服务器 fd.append("file",file); $.ajax({ type: 'POST', url: "url", data: fd, processData: false, async: true, contentType: false, dataType: 'json', success: function (data) { } }); }

  

posted @ 2017-06-02 17:11  joe立  阅读(301)  评论(0编辑  收藏  举报