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程序设计有所帮助。