移动端图片上传后进行压缩功能

移动端图片上传后进行压缩功能

在进行讲解上传图片压缩之前，我们先来了解下HTML5中的文件上传的基本知识点。

一： FileList对象与file对象。

FileList对象表示用户选择的文件列表。在HTML4中，file控件内只允许放置一个文件，但是到HTML5中，通过添加multiple属性，file控件内允许一次放置多个文件。如下代码：

<input type=”file” multiple/>

控件内的每一个用户选择的文件都是一个file对象，而FileList对象则为这些file对象的列表，代表用户选择的所有文件，file对象有2个属性，name属性代表文件名，不包括路径，lastModifiedDate属性表示文件的最后修改日期。

如下代码：

HTML代码：

选择文件
    <input type="file" id="file" multiple />
    <input type="button" onclick = "showFileName()" value="文件上传"/>

JS代码如下：

<script>
        function showFileName() {
            var files = document.getElementById("file").files;
            for(var i = 0, ilen = files.length; i < ilen; i++) {
                alert(files[i].name);
                alert(files[i].lastModifiedDate);
            }
        }
</script>

如上input输入框可以选择任何类型的文件，但是我们也可以指定图片文件，我们可以加一个属性 accept=”image/*”  如下：

<input type=”file” id=”file” accept=”image/*” /> 

二：Blog对象。

在HTML5中，新增一个Blog对象，代表原始二进制数据，blog对象有2个属性，size属性表示一个blog对象的字节长度，type属性表示blog的MIME类型，如果是未知类型，则返回一个空字符串。

如下代码：

HTML代码：

<h1 style="color:red;font-size:24px;">Blob对象</h1>
选择文件
<input type="file" id="file2" accept="image/*" multiple/>
<input type="button" value="显示文件信息" onclick="showFileType();"/>
文件字节长度:<span id="size"></span><br/>
文件类型: <span id="type"></span> <br/>

JS代码如下：

function showFileType() {
    var file = document.getElementById("file2").files[0];
    var size = document.getElementById("size");
    // 显示文件字节长度
    size.innerHTML = file.size;
    var type = document.getElementById("type");
    type.innerHTML = file.type;

}

三：FileReader对象

FileReader对象拥有5种方法，其中四种用以读取文件。

1. readAsBinaryString 这个方法将Blog对象或文件中的数据读取为二进制字符串，通常我们将它传送给服务器，服务器可以通过这段字符串存储文件。
2. readAsText 该方法有2个参数，其中第二个参数是文本的编码方式，默认值为utf-8 这个方法容易理解，将blog对象或文件中的数据以文本方式读取，读取的结果即为这个文本文件中的内容。
3. readAsDataURL 该方法将Blog对象或文件中的数据读取为一串Data URL字符串，该方法事实上将数据以一种特殊格式的URL地址形式直接读入页面。
4. readAsArrayBuffer：该方法将blog对象或文件中的数据读取为一个ArrayBuffer对象。

FileReader事件如下：

1. onabort  数据读取中断时触发。
2. onerror： 数据读取出错时触发。
3. onloadstart 数据读取开始时触发。
4. onprogress  数据读取中
5. onload 数据读取成功完成时触发。
6. onloadend  数据读取完成时触发，无论成功或者失败。

打印文件名及文件最后修改时间demo 及读取文件长度及读取文件类型demo

读取图片，二进制及文本文件demo链接如下

下面我们可以看个上传图片的demo，如下：

 HTML代码如下：

<h2>原来的图像</h2>
    <img src="http://m3.img.srcdd.com/farm5/d/2015/0214/22/5127B4C55CEF418542B229E79B71C4D6_B500_900_169_56.jpeg" id="img"/>
    <h2>使用canvas生成的图像</h2>
    <div id="imageToCanvas"></div>
    
    <h2>把canvas转变为image图像</h2>
    <div id="canvasToImage"></div>

    
    <h2>上传图片进行压缩功能</h2>
    <div class="upload-img-div">
        <input type="text" class="inputstyle" id="inputstyle" name="photo1"/>
        <label class="file1" id="upload-img">上传图片</label>
        <input type="file" id="photo" name="photo" class="photo-ip">
    </div>
    <input class="submit-bt brand-submit" type="button" id="Submit_Button" value="提  交">
    <img src="" id="test" style="display:none;"/>

CSS代码如下：

.upload-img-div {position:relative;overflow:hidden;}
    .inputstyle {float:left;width:380px;height:35px;border:1px solid #999;font-size:1.3em;}
    .file1 {float:left;width:80px;height:37px;line-height:37px;background:#81bb3b;color:#fff;font-size:14px;text-align:center;margin-left:10px;border-radius:5px;}
    .photo-ip {position:absolute;top:0;left:0;width:472px;height:39px !important;opacity:0;cursor:pointer;}
    .brand-submit {width:200px;height:30px;cursor:pointer;margin-top:20px;background:none;border:1px solid #fc6605;background:#fc6605;color:#fff;border-radius:5px;}

JS代码如下：

window.onload = function() {
            // 把image 转换为 canvas (画布)
            function imageToCanvas(image) {
            
                var canvas = document.createElement("canvas");
                canvas.width = image.width;
                canvas.height = image.height;
                canvas.getContext("2d").drawImage(image,0,0);
                return canvas;
            }
            var image = document.getElementById("img");
            var canvas = imageToCanvas(image);
            document.getElementById("imageToCanvas").appendChild(canvas);
        
            // 转换canvas为image 假设图片已经在canvas上生成好了，那么可以使用如下方法，把canvas转变为image图像
            function canvasToImage(canvas) {
                var img = new Image();
                // canvas.toDataURL 返回的是一串Base64编码的URL
                console.log(canvas)
                // 指定格式 PNG 
                var newImageData = canvas.toDataURL('');

                // 打印出64位编码
                console.log(newImageData);
                img.src = newImageData;
                return img;
            }
            document.getElementById("canvasToImage").appendChild(canvasToImage(canvas));

            
            //  上传图片 
            $("#photo").change(function(){
                alert(1)
                var value = $.trim($(this).val());
                if(value == "") {
                    return;
                }
                $("#inputstyle").val(value);
                
            });
            
            /**
             * 压缩图片
             * @param {Image} source_img_obj 图片对象
             * @param {Integer} quality 图片质量
             * @return {Image} output_format 输出图片格式
             */
            function compress(source_img_obj, quality, output_format) {
                var mime_type = "image/jpeg";
                if(output_format!=undefined && output_format=="png"){
                    mime_type = "image/png";
                }
                var cvs = document.createElement('canvas');
                cvs.width = source_img_obj.width;
                cvs.height = source_img_obj.height;
                var ctx = cvs.getContext("2d").drawImage(source_img_obj, 0, 0);

                var newImageData = cvs.toDataURL(mime_type, quality/100);

                var result_image_obj = new Image();
                result_image_obj.src = newImageData;
                return {
                    "result_image_obj": result_image_obj,
                    "newImageData": newImageData
                };
            }
            $("#Submit_Button").click(function(){
                var file = document.getElementById("photo").files[0];
                var fileExt = $("#inputstyle").val();
                if(fileExt == "") {
                    alert("必须选择一个文件");
                    return;
                }
                var reader = new FileReader();
                // 将文件以二进制的形式进行读入页面
                reader.readAsDataURL(file);
                reader.onload = function() {
                    var i = document.getElementById("test");
                    i.src = this.result;
                    var quality = 70;
                    var obj = compress(i,quality);
                    i.src = obj.result_image_obj.src;
                    var data = obj.newImageData;
                    console.log(data);
                    // post请求 可以把data数据传过去
                }
            });
            
        }

一定要放在服务器下运行 否则会报错，运行后效果如下：

64位压缩后的编码是我们需要的 然后就可以对图片进行上传了。