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

在进行讲解上传图片压缩之前，我们先来了解下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位压缩后的编码是我们需要的 然后就可以对图片进行上传了。

时间： 2024-10-25 15:46:04

移动端图片上传后进行压缩功能的相关文章

【图片】移动端图片上传旋转、压缩的解决方案

移动端图片上传旋转.压缩的解决方案 来源 知乎    作者 林鑫 工作上有手机上传准考证等图片的功能,这个是非常必要的,作者写的很全面,就直接记录这个地址了 还有一篇 文件的上传.下载

移动端图片上传解决方案localResizeIMG先压缩后ajax无刷新上传

现在科技太发达,移动设备像素越来越高,随便一张照片2M+,但是要做移动端图片上传和pc上略有不同,移动端你不能去限制图片大小,让用户先处理图片再上传,这样不现实.所以理解的解决方案就是在上传先进行图片压缩,然后再把压缩后的图片上传到服务器. 一翻google之后,发现了localResizeIMG,它会对图片进行压缩成你指定宽度及质量度并转换成base64图片格式,那么我们就可以把这个base64通过ajax传到后台,再进行保存,先压缩后上传的目的就达到了. 处理过程 LocalResizeIM

动端图片上传解决方案localResizeIMG先压缩后ajax无刷新上传

现在科技太发达,移动设备像素越来越高,随便一张照片2M+,但是要做移动端图片上传和pc上略有不同,移动端你不能去限制图片大小,让用户先处理图片再上传,这样不现实.所以理解的解决方案就是在上传先进行图片压缩,然后再把压缩后的图片上传到服务器. 一翻google之后,发现了localResizeIMG,它会对图片进行压缩成你指定宽度及质量度并转换成base64图片格式,那么我们就可以把这个base64通过ajax传到后台,再进行保存,先压缩后上传的目的就达到了. 处理过程 LocalResizeIM

移动端图片上传方法

实现效果 文件下载 http://files.cnblogs.com/files/sntetwt/%E7%A7%BB%E5%8A%A8%E7%AB%AF%E5%9B%BE%E7%89%87%E4%B8%8A%E4%BC%A0.rar 实现步骤 一.隐藏<input type="file" id="file" name="Filedata" style="display:none;" accept="image/

angularJS+Ionic移动端图片上传的解决办法

前端开发中经常会碰到图片上传的问题,网上的解决办法很多,可是有些图片上传的插件会有一些附属的插件,因此因为一个图片上传的问题可能额需要引入其他插件到项目中,久而久之项目会不伦不类,有时候插件之间也会有一些冲突,所以我们可以自己写一个图片上传的方法. 今天的demo是帮朋友做的一个移动端微信公众号项目,项目架构采用angular+ionic,因为对dom的操作jQuery会方便很多,但是jQuery比较厚重,所以最后选择用轻量级的zepto来对项目dom进行操作. 项目中有一个需求是上传个人作品,

图片上传后及时预览

<!DOCTYPE html> <html> <head> <meta content="charset=utf-8" /> <!--设置图片上传后预览的div样式--> <style type="text/css"> *{ float:left; margin:0; } body>div{ width:200px; height:225px; text-align:center; } #

【Servlet】利用Servlet3.0标准与JSTL表达式实现文件上传系统，支持图片上传后显示

伴随着JDK1.6一起出现的Servlet3.0标准,使得JSP的文件上传系统不再艰难,此前在JSP的文件上传系统需要<[Jsp]使用jspsmartupload完成简单的文件上传系统>(点击打开链接)类似这样的插件才能完成的文件上传系统,还不支持中文,使得各位程序猿掏空心思才能解决这个问题.现在Servlet3.0对文件上传的方法进行封装,无须分块就可以实现.而且Servlet3.0还不用类似<[Servlet]最简单的Servlet JavaWeb程序>(点击打开链接)在web

图片上传后即时预览

<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8" /> //设置图片上传后预览的div样式 <style type="text/css"> #preview, .img, img { width: 200px; height: 200px; } #

微信端wap网页，多个图片上传后编辑的问题

最近参与了一个微信网页端的开发,其中有一个上传多个图片的功能,如下 下方能够添加多张图片,通过thinkPHP的图片上传类接收,将图片名以逗号分隔的形式存在数据库里. 编辑时看起来时好好的 待续..