热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

H5单文件压缩插件

单文件压缩上传<inputtypefile>构造函数functionUpFileImg(options){varoptionsoptions

单文件压缩上传

<input type="file" id="file">

构造函数

function UpFileImg(options){
var optiOns= options || {
el:
'',
compressSize:
640,
datatype:
'base64',
success:
function(val){}
};
var that = this;

// 读取文件
this.setFilesReader = function(file){
var reader = new window.FileReader();
var fileSize = Math.round(file.size/1024/1024);
var that = this;
reader.readAsDataURL(file);
reader.onload
= function(e) {
that.compress(
this.result,fileSize);
};
};
// 压缩文件
this.compress = function(res, fileSize){
var img = new Image();
var maxW = options.compressSize; //压缩后大小
var that = this;
img.src
= res;
img.onload
= function () {
var cvs = document.createElement('canvas'), ctx = cvs.getContext('2d');

if(img.width > maxW) {
img.height
*= maxW / img.width;
img.width
= maxW;
}

cvs.width
= img.width;
cvs.height
= img.height;

ctx.clearRect(
0, 0, cvs.width, cvs.height);
ctx.drawImage(img,
0, 0, img.width, img.height);

// 设置压缩比
var compressRate = that.getCompressRate(1,fileSize);

// 压缩
var dataUrl = cvs.toDataURL('image/jpeg', compressRate);
if(options.datatype === 'blob'){
var dataUrl = that.dataURItoBlob(dataUrl);
}
// 成功后回调
that.compressCallblak(options.success,dataUrl);
};
};

// 压缩后回调函数
this.compressCallblak = function(fun,val){
fun(val);
};

// 计算压缩比
this.getCompressRate = function(allowMaxSize,fileSize){
var compressRate = 1;

if(fileSize/allowMaxSize > 4){
compressRate = 0.5;
}
else if(fileSize/allowMaxSize >3){
compressRate = 0.6;
}
else if(fileSize/allowMaxSize >2){
compressRate = 0.7;
}
else if(fileSize > allowMaxSize){
compressRate
= 0.8;
}
else{
compressRate
= 0.9;
}
return compressRate;
};

//base64转blob
this.dataURItoBlob = function(base64Data){
var byteString;
if (base64Data.split(',')[0].indexOf('base64') >= 0){
byteString
= atob(base64Data.split(',')[1]);
}
else{
byteString
= unescape(base64Data.split(',')[1]);
}
var mimeString = base64Data.split(',')[0].split(':')[1].split(';')[0];
var ia = new Uint8Array(byteString.length);
for (var i = 0; i ) {
ia[i] = byteString.charCodeAt(i);
}
return new Blob([ia], {type:mimeString});
}

document.getElementById(options.el).onchange
= function (){
var f = this.files[0];
that.setFilesReader(f);
};
};

示例:(转为blob对象后使用ajax上传)

var fileImg = new UpFileImg({
el:
'file', //绑定id
compressSize:700, //默认640
datatype:'blob', //默认转换为base64
success:function(data,name){
// 回调
console.log(data);
console.log(name);
var fd = new FormData();

// file_key为上传文件后台对应的key也就相当于input的name,
// data为bolo对象,
// name为上传文件的名称
fd.append("file_key", data, name);
$.ajax({
url:
'上传地址',
type:
'POST',
data: fd,
processData:
false, // 必须
contentType: false, // 必须
dataType: 'json',
success:
function(data){
console.log(data);
}
});
}
});

 

名称 默认值 是否必传 描述
el 对应input的ID
compressSize 640 压缩后最大宽度
datatype base64 回调函数返回值类型,默认返回base64,可以设置为blob,配合ajax进行上传
success 回调函数返回文件名称,与压缩后文件(base64或者blob)

推荐阅读
  • 开发日志:高效图片压缩与上传技术解析 ... [详细]
  • 本文介绍了如何利用 `matplotlib` 库中的 `FuncAnimation` 类将 Python 中的动态图像保存为视频文件。通过详细解释 `FuncAnimation` 类的参数和方法,文章提供了多种实用技巧,帮助用户高效地生成高质量的动态图像视频。此外,还探讨了不同视频编码器的选择及其对输出文件质量的影响,为读者提供了全面的技术指导。 ... [详细]
  • WinMain 函数详解及示例
    本文详细介绍了 WinMain 函数的参数及其用途,并提供了一个具体的示例代码来解析 WinMain 函数的实现。 ... [详细]
  • 在JavaWeb开发中,文件上传是一个常见的需求。无论是通过表单还是其他方式上传文件,都必须使用POST请求。前端部分通常采用HTML表单来实现文件选择和提交功能。后端则利用Apache Commons FileUpload库来处理上传的文件,该库提供了强大的文件解析和存储能力,能够高效地处理各种文件类型。此外,为了提高系统的安全性和稳定性,还需要对上传文件的大小、格式等进行严格的校验和限制。 ... [详细]
  • 在《Cocos2d-x学习笔记:基础概念解析与内存管理机制深入探讨》中,详细介绍了Cocos2d-x的基础概念,并深入分析了其内存管理机制。特别是针对Boost库引入的智能指针管理方法进行了详细的讲解,例如在处理鱼的运动过程中,可以通过编写自定义函数来动态计算角度变化,利用CallFunc回调机制实现高效的游戏逻辑控制。此外,文章还探讨了如何通过智能指针优化资源管理和避免内存泄漏,为开发者提供了实用的编程技巧和最佳实践。 ... [详细]
  • 如何将TS文件转换为M3U8直播流:HLS与M3U8格式详解
    在视频传输领域,MP4虽然常见,但在直播场景中直接使用MP4格式存在诸多问题。例如,MP4文件的头部信息(如ftyp、moov)较大,导致初始加载时间较长,影响用户体验。相比之下,HLS(HTTP Live Streaming)协议及其M3U8格式更具优势。HLS通过将视频切分成多个小片段,并生成一个M3U8播放列表文件,实现低延迟和高稳定性。本文详细介绍了如何将TS文件转换为M3U8直播流,包括技术原理和具体操作步骤,帮助读者更好地理解和应用这一技术。 ... [详细]
  • 基于Net Core 3.0与Web API的前后端分离开发:Vue.js在前端的应用
    本文介绍了如何使用Net Core 3.0和Web API进行前后端分离开发,并重点探讨了Vue.js在前端的应用。后端采用MySQL数据库和EF Core框架进行数据操作,开发环境为Windows 10和Visual Studio 2019,MySQL服务器版本为8.0.16。文章详细描述了API项目的创建过程、启动步骤以及必要的插件安装,为开发者提供了一套完整的开发指南。 ... [详细]
  • 本文介绍了如何利用Struts1框架构建一个简易的四则运算计算器。通过采用DispatchAction来处理不同类型的计算请求,并使用动态Form来优化开发流程,确保代码的简洁性和可维护性。同时,系统提供了用户友好的错误提示,以增强用户体验。 ... [详细]
  • 为了在Hadoop 2.7.2中实现对Snappy压缩和解压功能的原生支持,本文详细介绍了如何重新编译Hadoop源代码,并优化其Native编译过程。通过这一优化,可以显著提升数据处理的效率和性能。此外,还探讨了编译过程中可能遇到的问题及其解决方案,为用户提供了一套完整的操作指南。 ... [详细]
  • ### 优化后的摘要本学习指南旨在帮助读者全面掌握 Bootstrap 前端框架的核心知识点与实战技巧。内容涵盖基础入门、核心功能和高级应用。第一章通过一个简单的“Hello World”示例,介绍 Bootstrap 的基本用法和快速上手方法。第二章深入探讨 Bootstrap 与 JSP 集成的细节,揭示两者结合的优势和应用场景。第三章则进一步讲解 Bootstrap 的高级特性,如响应式设计和组件定制,为开发者提供全方位的技术支持。 ... [详细]
  • Spring Boot 中配置全局文件上传路径并实现文件上传功能
    本文介绍如何在 Spring Boot 项目中配置全局文件上传路径,并通过读取配置项实现文件上传功能。通过这种方式,可以更好地管理和维护文件路径。 ... [详细]
  • 在 Ubuntu 中遇到 Samba 服务器故障时,尝试卸载并重新安装 Samba 发现配置文件未重新生成。本文介绍了解决该问题的方法。 ... [详细]
  • 本文详细介绍了如何使用Python中的smtplib库来发送带有附件的邮件,并提供了完整的代码示例。作者:多测师_王sir,时间:2020年5月20日 17:24,微信:15367499889,公司:上海多测师信息有限公司。 ... [详细]
  • Android开发技巧:使用IconFont减少应用体积
    本文介绍如何在Android应用中使用IconFont来显示图标,从而有效减少应用的体积。 ... [详细]
  • 开机自启动的几种方式
    0x01快速自启动目录快速启动目录自启动方式源于Windows中的一个目录,这个目录一般叫启动或者Startup。位于该目录下的PE文件会在开机后进行自启动 ... [详细]
author-avatar
你看我的泪
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有