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

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

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

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

file 和 FileList 对象

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

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



// 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。其他参数会被忽略。

压缩


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结构如下：

上传图片

原图预览压缩后预览

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 = $("" +
   "" +
   "X");
 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程序设计有所帮助。

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

JavaScript相关栏目本月热门文章