javascript实现移动端 HTML5 图片上传预览和压缩功能示例

本文实例讲述了javascript实现移动端 HTML5 图片上传预览和压缩功能。分享给大家供大家参考,具体如下:

在开发移动端web网页中,我们不可避免的会遇到文件上传的功能,但由于手机图片尺寸太大,上传时间过长导致用户体验太差,就需要在上传前对图片进行一定的压缩。

在代码之前,有必要先了解我们即将使用到的几个API

file 和 FileList 对象

file对象可以用来获取某个文件的信息,还可以用来读取这个文件的内容.通常情况下,File对象是来自用户在一个 input 元素上选择文件后返回的FileList对象,也可以是来自由拖放操作生成的 DataTransfer对象。

通常情况我们这样使用它:

<input id="test" type="file" multiple/>

// FileList 对象
var fs = document.getElementById("text").files
console.log(fs)
>>FileList
	0:File
		lastModified:1487309111498
		lastModifiedDate:Fri Feb 17 2017 13:25:11 GMT+0800 (中国标准时间)
		name:"1.png"
		size:22177
		type:"image/png"
		webkitRelativePath:""

FileReader

FileReader,web应用程序使用它可以异步的读取存储在用户计算机上的文件(或者原始数据缓冲)内容。

1、具体使用之前,我们应先创建一个FileReader 对象

var reader = new FileReader()

2、然后读取一个文件,共有四种方式,这里只介绍我们最常使用的一个:

reader.readAsDataURL(fs);	// var fs = document.getElementById("text").files

3、在 onload 事件中触发回调

reader.onload = function (e) {
   console.log(e)
   console.log(this)
 }
 // this.result 是一个base64 格式的图片地址

HTMLCanvasElement.toDataURL()

HTMLCanvasElement.toDataURL() 方法返回一个包含图片展示的 data URI 。可以使用 type 参数其类型,默认为 PNG 格式。图片的分辨率为96dpi。

  • 如果画布的高度或宽度是0,那么会返回字符串“data:,”。
  • 如果传入的类型非“image/png”,但是返回的值以“data:image/png”开头,那么该传入的类型是不支持的。
  • Chrome支持“image/webp”类型。

语法

canvas.toDataURL(type, encoderOptions);

参数

type 可选

​ 图片格式,默认为 image/png

encoderOptions 可选

​ 在指定图片格式为 image/jpeg 或 image/webp的情况下,可以从 0 到 1 的区间内选择图片的质量。如果超出取值范围, 将会使用默认值 0.92。其他参数会被忽略。

压缩

/**
* @param	{Object}	f	input选择的图片	必填
* @param	{String}	quality		图片压缩的质量[0, 1]
* @param	{String}	output_img_type		输出图片的类型
*/
compress: function (f, quality, output_img_type) {
          var mime_type = "image/jpeg";
          if(output_img_type!=undefined && output_img_type=="image/png"){
            mime_type = "image/png";
          }
          createImageBitmap(f).then(function(imageBitmap) {
            var max = 1000; // 设置最大分辨率
            var c_w = '';
            var c_h = '';
            var width = imageBitmap.width;
            var height = imageBitmap.height;
            // 等比例缩放
            if (width > max || height > max) {
              if (width > height) {
                c_w = max;
                c_h = max * height / width;
              } else {
                c_h = max;
                c_w = max * width / height;
              }
            }else {   // 不缩放
              c_w = width;
              c_h = height;
            }

            var canvas = document.createElement('canvas');
            canvas.width = c_w;
            canvas.height = c_h;
            var ctx = canvas.getContext('2d');
            ctx.drawImage(imageBitmap,0,0, width, height, 0, 0, c_w, c_h);
            canvas.toBlob(function(blob){
              images.push(blob);
            },mime_type, quality);
          });
        }

实例

下面我们就来实现图片预览和压缩功能

HTML结构如下:

<div class="upload">
  <p>上传图片</p>
  <form>
    <input multiple id="upload_input" type="file" />
  </form>
  <h4>原图预览</h4>
  <img src="" id="test">
  <h4>压缩后预览</h4>
  <img src="" id="test2" style="max-width: 200px;">
  <button type="submit">点击提交</button>
</div>

JS 代码如下:

 window.onload = function () {
    var Upload = {
      change: function () {
        var oform = document.querySelector('form'),
          _this = this,
          res = //,
          oFiles = document.getElementById('upload_input').files;
        console.log(oFiles)
        for(var key in oFiles) {
          if(oFiles.hasOwnProperty(key)) {
            var f = oFiles[key];
            var type = f.type;
            if(type !== 'image/png' && type !== 'image/jpg' &&type !== 'image/jpeg' ) {
              alert("图片的格式必须为png或者jpg或者jpeg格式!");
              return;
            }
            var reader = new FileReader();
            reader.readAsDataURL(f);
            reader.onload = function (e) {
              console.log(e)
              console.log(this)
              var img = document.getElementById('test');
              var img2 = document.getElementById('test2');
              img.src = this.result;

              var quality = .8;
              var compressImg = Upload.compress(img,quality);
              img2.src = compressImg
            }
          }
        }

      },
      change2: function() {
        var file_arr = file.files;
            var ul = $(".weui_uploader_files");
            if(file_arr.length < 7) {
              for(var key in file_arr) {
                if(file_arr.hasOwnProperty(key)) {
                  var f = file_arr[key];
                  var url = URL.createObjectURL(f);
                  var reader = new FileReader();
                  reader.readAsDataURL(f);
                  n +=1;
                  if(n < 7) {
                    reader._onload = function(e) {

                      // 拼接显示预览图片的html
                      var list = $("<li class='weui_uploader_file' style='position: relative'>" +
                        "<img id='preview" + n + "' class=preview_li' style='width: 100%;height: 100%'>" +
                        "<span id='delImg" + n+ "' style='position: absolute; top: 0; right: 4px; color: #e4007f'>X</span></li>");
                      ul.append(list);
                      // 将转化后的图片地址放在img中
                      var pic = document.getElementById('preview' + n);
                      //pic.src = this.result;
                      pic.src=url;
                      console.log(reader);
                      images.push(f);
                      document.getElementById('delImg' + n).addEventListener("click", function () {
                        $(this).parent().remove();
                      });
                      return {
                        images:images
                      };
                    };
                    reader._onload();
                  }else {
                    $.alert("最多上传6张图片");
                  }
                }
              }
            }else {
              $.alert("最多上传6张图片");
            }
      },
      compress: function (source_img, quality, output_img_type) {
        var mime_type = "image/jpeg";
        if(output_img_type!=undefined && output_img_type=="image/png"){
          mime_type = "image/png";
        }
        var max = 1000; // 设置最大分辨率
        var c_w = '';
        var c_h = '';
        var width = source_img.width;
        var height = source_img.height;
        // 等比例缩放
        if (width > max || height > max) {
          if (width > height) {
            c_w = max;
            c_h = max * height / width;
          } else {
            c_h = max;
            c_w = max * width / height;
          }
        }else {   // 不缩放
          c_w = width;
          c_h = height;
        }
        var canvas = document.createElement('canvas');
        canvas.width = c_w;
        canvas.height = c_h;
        var ctx = canvas.getContext('2d');
        ctx.drawImage(source_img,0,0, width, height, 0, 0, c_w, c_h);

        var outputUrl = canvas.toDataURL(mime_type, quality);
        return outputUrl;
      },
      submit: function () {

      }

    };

    document.getElementById('upload_input').addEventListener('change',Upload.change);
  }

DEMO效果预览:

更多关于JavaScript相关内容感兴趣的读者可查看本站专题:《JavaScript图片操作技巧大全》、《JavaScript切换特效与技巧总结》、《JavaScript运动效果与技巧汇总》、《JavaScript动画特效与技巧汇总》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》

希望本文所述对大家JavaScript程序设计有所帮助。

(0)

相关推荐

  • JavaScript+html5 canvas实现图片破碎重组动画特效

    也许你见过HTML5图片破碎动画特效,实现的原理也挺简单的.但是你应该没有见过视频也可以破碎重组,这个HTML5动画就是利用Canvas的相关特性,实现了点击鼠标让视频破碎重组的效果.在视频区域点击鼠标,即可让该区域的视频破碎,让后经过一段时间后,破碎的区域又可以重组还原,视觉效果非常棒. HTML代码 <div style="display:none"> <video id="sourcevid" autoplay="true"

  • js+html5绘制图片到canvas的方法

    本文实例讲述了js+html5绘制图片到canvas的方法.分享给大家供大家参考.具体实现方法如下: <!DOCTYPE html> <html> <body> <canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;"> Your browser does not suppor

  • JS+HTML5实现上传图片预览效果完整实例【测试可用】

    本文实例讲述了JS+HTML5实现上传图片预览效果.分享给大家供大家参考,具体如下: 在项目中遇到用input标签file类型的文件上传,想实在上传之前进行图片的预览功能:之前的做的一个解决方案是文件先上传上去然后返回地址再显示在页面上,这样就不太好,因为用户基本信息可能并没有保存,但是头像却已经改变,如果在需要改变就导致了多余图片的保存服务器. 在网上找了下解决方案,如下所示: <!DOCTYPE HTML> <html> <head> <meta charse

  • js HTML5多图片上传及预览实例解析(不含前端的文件分割)

    本文实例为大家分享了js HTML5多图片上传及预览实例,供大家参考,具体内容如下 主要运用  1.HTML5 files可以选择多文件,以及获取多文件信息  2.XMLHTTPRequest对象,发送HTTP传输请求  3.将每一个文件放在FormData,进行传输  4.利用readAsDataURL将图片内容直接变成url,放在img标签的src当中,生成可预览的图片 html+css+js代码 <!DOCTYPE html> <head> <meta http-equ

  • js HTML5 canvas绘制图片的方法

    本文实例为大家分享了HTML5 canvas绘制图片的具体代码,供大家参考,具体内容如下 demo.js window.onload=function() { createcanvas(); drawImage(); } function createcanvas() { var CANVAS=document.getElementById('mycanvas'); context=CANVAS.getContext('2d'); } function drawImage() { var img

  • 基于HTML5+JS实现本地图片裁剪并上传功能

    最近做了一个项目,这个项目中需要实现的一个功能是:用户自定义头像(用户在本地选择一张图片,在本地将图片裁剪成满足系统要求尺寸的大小).这个功能的需求是:头像最初剪切为一个正方形.如果选择的图片小于规定的头像要求尺寸,那么这整张图片都会作为头像.如果大于规定的尺寸,那么用户可以选择要裁剪的区域.用户点击确定按钮,就将裁剪得到的图片数据发送到服务器,在后端将图片数据保存成一个文件. 要完成上述功能,涉及到的知识有:ajax,canvas和html5中的files接口.我将实现这个功能的代码封装到了4

  • 手机端 HTML5使用photoswipe.js仿微信朋友圈图片放大效果

    先来几张效果图: 点击其中一张照片可放大,可支持图片文字描述: 同时支持分享功能: 支持手势放大缩小 使用js框架是PhotoSwipe.  PhotoSwipe是一个图片放大插件,兼容pc和移动端,经历过多个版本的迭代且一直在不断更新,踩过的坑不知凡几,在移动端有着巨大的优势. 1.可控制多种风格如: 标题.分享.全屏按钮,点击事件.是否加入字幕,背景透明等. 2.可支持移动端触摸手势兼容pc端 所有的基本手势支持:滑动下一个或上一个,拖动平移.缩放.放大或关闭,点击切换控件,双击放大或缩放.

  • JS+html5实现异步上传图片显示上传文件进度条功能示例

    本文实例讲述了JS+html5实现异步上传图片显示上传文件进度条功能.分享给大家供大家参考,具体如下: <html> <head> </head> <body> <p> emo_album_id:<input type="text" name="emo_album_id" id="emo_album_id" value='1'> </p> <p> na

  • HTML5 JS压缩图片并获取图片BASE64编码上传

    本文实例为大家分享了HTML5 JS压缩图片,并获取图片BASE64编码上传的方法,供大家参考,具体内容如下 基本过程 1) 调用 FileReader 的 reader.readAsDataURL(img); 方法, 在其onload事件中, 将用户选择的图片读入 Image对象. 2) 在image对象的 onload 事件中, 通过 canvas 的 canvas.getContext('2d') 的 drawImage 方法, 将Image 改变大小绘制到canvas上. 3) 通过 c

  • JS HTML5拖拽上传图片预览

    1.文件API:(File API) file类型的的表单控件选择的每一个文件都是一个file对象,而FileList对象则是这些file对象的集合列表,代表所选择的所有文件.file对象继承于Blob对象,该对象表示二进制原始数据,提供slice方法,可以访问到字节内部的原始数据块.总之,file对象包含与FlieList对象,而file对象继承于Blob对象! 各对象的相关属性关系: FileReader接口: 由图可知:HTML5还提供了FileReader接口:用于将文件读入内存,并读取

  • JS+HTML5实现图片在线预览功能

    本文实例为大家分享了HTML5图片在线预览的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html> <head> <title>HTML5图片预览</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <script src="http://img9.ton

随机推荐