分享图片压缩上传demo,可以选择一张或多张图片也可以拍摄照片
2016-08-05更新：
下方的代码是比较OLD的了，是通过js进行图片的剪切 旋转 再生成，效率较低。
后来又整合了一个利用native.js本地接口的压缩代码 ，链接在这
。页面中有详细的说明，需要的童鞋们可以参考以下。
源码地址 https://github.com/phillyx/MUIDemos/tree/dce9283ea3e0726ccff0e8ef5b25fa028025ac69
代码整合了
1.多串君
- 伟子
两个人的demo,
其中resize原来的filereader在5 中更改为plus.io.FileReader()方不报错。
如有错误，请不吝批评指正。
更新日志：
2015-05-09 1020450921@qq.com
1.修复了ios下无法获取图片宽高的问题：
ios下不在img.onload中是获取不到文件对象的。
新增了最大宽度（高度）的判别，按比例压缩。
具体代码如下：
<!DOCTYPE html>
<html> <head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title></title>
<link href="http://ask.dcloud.net.cn/../../../css/mui.min.css" rel="stylesheet" />
<style type="text/css">
body {
background-color: #efeff4;
}
.mui-content {} .mui-content a {
color: #8F8F94;
}
.mui-content a.active {
color: #007aff;
}
.mui-title {
font-family: simhei;
}
.btn_1 {
position: absolute;
bottom: 100px;
left: 10px;
right: 10px;
}
.btn_2 {
position: absolute;
bottom: 20px;
left: 10px;
right: 10px;
}
.mui-btn-block {
width: 90%;
margin: 0 auto;
}
body {
overflow: hidden;
}
.showimg {
margin: 20px 10px auto 10px;
text-align: center;
}
</style>
</head> <body>
<header class="mui-bar mui-bar-nav">
<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
<h1 class="mui-title">上传身份证照片</h1>
<a class="mui-pull-right mui-icon mui-icon-upload" onclick="imgupgrade()"></a>
</header>
<!--
作者：1020450921@qq.com
时间：2015-04-24
描述：参考 http://ask.dcloud.net.cn/question/2089
-->
<div class="mui-content">
<div class="showimg"> </div>
<button type="button" class="mui-btn mui-btn-primary mui-btn-block btn_1" onclick="galleryImgs()">从相册中选择图片</button>
<br>
<button type="button" class="mui-btn mui-btn-success mui-btn-block btn_2" onclick="cameraimages()">拍照</button>
</div>
</body>
<script src="../../../js/mui.min.js"></script>
<script src="../../../js/binaryajax.js" type="text/javascript" charset="utf-8"></script>
<script src="../../../js/exif.js" type="text/javascript" charset="utf-8"></script>
<script src="../../../js/canvasResize.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript">
mui.init();
mui.plusReady(function() {}) //上传单张图片
function galleryImg() {
//每次拍摄或选择图片前清空数组对象
f1.splice(0, f1.length);
document.getElementsByClassName("showimg")[0].innerHTML = null;
// 从相册中选择图片
mui.toast("从相册中选择一张图片");
plus.gallery.pick(function(path) {
showImg(path);
}, function(e) {
mui.toast("取消选择图片");
}, {
filter: "image",
multiple: false
});
} function galleryImgs() {
//每次拍摄或选择图片前清空数组对象
f1.splice(0, f1.length);
document.getElementsByClassName("showimg")[0].innerHTML = null;
// 从相册中选择图片
mui.toast("从相册中选择不超过两张图片");
plus.gallery.pick(function(e) {
if (e.files.length != 2) {
mui.toast('请选择身份证正面和背面照片共两张');
return false;
}
for (var i in e.files) {
showImg(e.files[i]);
}
}, function(e) {
mui.toast("取消选择图片");
}, {
filter: "image",
multiple: true
});
}
// 拍照添加文件 function cameraimages() {
//每次拍摄或选择图片前清空数组对象
f1.splice(0, f1.length);
document.getElementsByClassName("showimg")[0].innerHTML = null;
var cmr = plus.camera.getCamera();
cmr.captureImage(function(p) {
plus.io.resolveLocalFileSystemURL(p, function(entry) {
var localurl = entry.toLocalURL(); //把拍照的目录路径，变成本地url路径，例如file:///........之类的。
showImg(localurl);
});
}, function(e) {
mui.toast("很抱歉，获取失败 " e);
});
}
// 全局数组对象，添加文件,用于压缩上传使用
var f1 = new Array();
function imgupgrade() {
mui.toast('后台联调时启用上传功能');
return;
var wt = plus.nativeUI.showWaiting();
var url = '后台地址';
var dataType = 'json';
//发送数据
var data = {
files1: f1 //base64数据
};
mui.post(url, data, success, dataType);
}
//成功响应的回调函数
var success = function(response) {
plus.nativeUI.closeWaiting();
if (response != null) {
alert("上传成功");
}
}
</script>
function showImg(url) {
// 兼容以“file:”开头的情况
if (0 != url.toString().indexOf("file://")) {
url = "file://" + url;
}
var div = document.getElementsByClassName("showimg")[0];
var img = new Image();
img.src = ur l; // 传过来的图片 路径在这里用。
img.onclick = function () {
plus.runtime.openFile(url);
};
img.onload = functi on() {
var tmph = img.height;
var tmpw = img.width;
var isHengTu = tmpw > tmph;
var max = Math.max(tmpw, tmph);
var min = Math.min(tmpw, tmph);
var bili = min / max;
if (max > 1200) {
max = 1200;
min = Math.floor(bili * max);
}
tmph = isHengTu ? min : max;
tmpw = isHengTu ? max : min;
img.style.border = "1px solid rgb(200,199,204)";
img.style.margin = "10px";
img.style.width = "150px";
img.style.height = "150px";
img.onload = null;
plus.io.resolveLocalFileSystemURL(url, function (entry) {
entry.file(function (file) {
console.log(file.size + '--' + file.name);
canvasResize(file, {
width: tmpw,
height: tmph,
crop: false,
quality: 50, //压缩质量
rotate: 0,
callback: function (data, width, height) {
f1.push(data);
img.src = data;
div.appendChild(img);
plus.nativeUI.closeWaiting();
}
});
});
},
function (e) {
plus.nativeUI.closeWaiting();
console.log(e.message);
});
};
};
原文 分享图片压缩上传demo,可以选择一张或多张图片也可以拍摄照片
分享图片压缩上传demo,可以选择一张或多张图片也可以拍摄照片的更多相关文章
- 三款不错的图片压缩上传插件(webuploader+localResizeIMG4+LUploader)
涉及到网页图片的交互,少不了图片的压缩上传,相关的插件有很多,相信大家都有用过,这里我就推荐三款,至于好处就仁者见仁喽: 1.名气最高的WebUploader,由Baidu FEX 团队开发,以H5为 ...
- Html5+asp.net mvc 图片压缩上传
在做图片上传时,大图片如果没有压缩直接上传时间会非常长,因为有的图片太大,传到服务器上再压缩太慢了,而且损耗流量. 思路是将图片抽样显示在canvas上,然后用通过canvas.toDataURL方法 ...
- 纯原生js移动端图片压缩上传插件
前段时间,同事又来咨询一个问题了,说手机端动不动拍照就好几M高清大图,上传服务器太慢,问问我有没有可以压缩图片并上传的js插件,当然手头上没有,别慌,我去网上搜一搜. 结果呢,呵呵...诶~又全是基于 ...
- springMVC多图片压缩上传的实现
首先需要在配置文件中添加配置: <!--配置文件的视图解析器,用于文件上传,其中ID是固定的:multipartResolver--> <bean id="multipar ...
- 基于vue + axios + lrz.js 微信端图片压缩上传
业务场景 微信端项目是基于Vux + Axios构建的,关于图片上传的业务场景有以下几点需求: 1.单张图片上传(如个人头像,实名认证等业务) 2.多张图片上传(如某类工单记录) 3.上传图片时期望能 ...
- 基于H5+ API手机相册图片压缩上传
// 母函数 function App(){} /** * 图片压缩,默认同比例压缩 * @param {Object} path * pc端传入的路径可以为相对路径,但是在移动端上必须传入的路径是照 ...
- js 图片压缩上传（base64位）以及上传类型分类
一.input file上传类型 1.指明只需要图片 <input type="file" accept='image/*'> 2.指明需要多张图片 <input ...
- HTML多图片压缩上传
本文介绍的是多张图片在前端统一压缩后再通过ajax提交给后台处理的业务,使用到的是LocalResizeIMG.js插件. 一.首先介绍项目结构 二.分享引用核心文件,这里没有分享CSS文件,因为没有 ...
- js 图片压缩上传(纯js的质量压缩，非长宽压缩)
下面是大神整理的demo,很实用,这里存一下备用,感谢大神! 此demo为大于1M对图片进行压缩上传 若小于1M则原图上传,可以根据自己实际需求更改. demo源码如下 <!DOCTYPE ht ...
随机推荐
- VBA算术运算符
以下是VBA支持算术运算符. 假设变量A=5,变量B=10,那么 - 运算符 描述 示例 + 两个操作数相加 A + B = 15 - 两个操作数相减 A - B = -5 * 两个操作数相乘 A * ...
- CSS伸缩布局
1. 伸缩布局应用: 伸缩布局应用 主轴: Flex容器的主轴用来配置Flex项目,默认是水平方向 侧轴: 与主轴垂直的轴称为侧轴,默认还是垂直方向 方向: 默认是主轴从左向右, 侧轴默认是从上到下 ...
- ubuntu创建kvm虚拟机
CPU虚拟化支持 [root@ubuntu~]# egrep -o '(vmx|svm)' /proc/cpuinfo vmx vmx vmx vmx KVM环境 [root@ubuntu ~]# a ...
- Hadoop集群搭建（cluster setup），ssh免密后一直要求输入密码的原因
前段时间,网上有言SHA-1加密技术,已经被谷歌公司破解,在linux系统中,集群间加密的技术是用DSA秘钥,秘钥本身其实是一种算法,就像前面说的SHA-1也是加密算法的一种. 免密在linux系统中 ...
- CSS3 filter滤镜
其默认值是none,他不具备继承性,其中filter-function一个具有以下值可选: grayscale灰度 sepia褐色(求专业指点翻译) saturate饱和度 hue-rotate色相旋 ...
- Linux学习之六-Linux系统的基础优化
Linux系统的基础优化 何谓'优化'.顾名思义,优化就是采取某些措施使某个东西或者某事物变得更加优异,出色.对于Linux而言,在初期安装好系统之后,也需要对其进行一定的基础优化,可分为安全上的优化 ...
- PaaS容器集群优化之路
1. 性能优化面对的挑战 以下是整个PaaS平台的架构 其中主要包括这些子系统: 微服务治理框架:为应用提供自动注册.发现.治理.隔离.调用分析等一系列分布式/微服务治理能力,屏蔽分布式系统的复杂度. ...
- Java字节码整体分析与总结
上一次[https://www.cnblogs.com/webor2006/p/9508341.html]已经将编译器生成的默认构造方法的字节相关的分析完了,接下来则分析咱们自定义的方法啦,按照顺序来 ...
- 原生JS发送Ajax请求、JSONP
一.JS原生Ajax Ajax=异步Javascript+XML: ajax是一种数据请求的方式,不需要刷新整个页面.这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新. ajax的核心 ...
- 系统分析与设计结对项目——WordCount
结对项目完成WordCount 合作者:201631062507 201631062526(学号) 代码地址:https://gitee.com/WordCountMC/WordCountTeam ...