移动端压缩图片。上传获取图片并压缩。lrz.all.bundle.js插件。 accept="image/*"加载慢的问题

查看下载地址：http://www.cnblogs.com/52fhy/p/5355601.html

查看input[type='file']的图片路径。在我的另一篇博客：http://blog.csdn.net/qq_33769914/article/details/54705820

而这篇文章可以说是综合性的，用了这个插件方法就也是可以获取图片路径的，并且还压缩了。所以这样就淘汰原来方法。更加好啦。

希望在上传的时候获取图片并压缩他，之后上传至服务器。

<script src="./dist/lrz.all.bundle.js"></script>
//这里加载的这个有个all，和上面地址的例子可能是不一样。因为

这个all的js是比较全的兼容android和ios的啦。

上传图片<input type="file" capture="camera" accept="image/*" name="logo" />

capture（捕获的意思）表示调用相册相机camera，录音机video和摄像机audio
accept 表示，直接打开系统文件目录。（其实html5的input:file标签还支持一个multiple属性，表示可以支持多选。加上这个multiple后，capture就没啥用了，因为multiple是专门yong用来支持多选的。）


但是！！！！

input type="file"  添加了 accept="image/*"属性在Chrome和Safari等Webkit浏览器下却出现了响应滞慢的问题。使得页面弹出选择文件的弹窗非常的慢6-10s，这是因为accept="image/*"会每一个文件都遍历一次所有的”image/*”文件类型。

解决办法是：删掉它或者将 * 通配符，或者修改为指定的MIME类型：

<input type="file" accept="image/gif,image/jpeg,image/jpg,image/png,image/svg">

$(function(){
$('input[name=logo]').on('change', function(){
lrz(this.files[0], {width: 640})   //

width:640这个代表的是图片占得内存的大小。值越小，占内存越小

[/code]

.then(function (rst) {

//请求ajax把图片地址传过去
 $.ajax({
url: site_url + 'api/user/updLogo',
type: 'post',
data: {img: rst.base64},   //rst.base64就是这个图片的地址 base64字符串

dataType: 'json',
timeout: 200000,
error: doAjax.error,

b907
success: doAjax.success,
});
 
})
.catch(function (err) {
//捕获错误，而且一旦出错上面的then都不会执行
 })
.always(function () {
//无论成败都会执行这里
});
});
})

[/code]

如果您的图片不是来自用户上传的，那么也可以直接传入图片路径：

lrz('./xxx/xx/x.png')
.then(function (rst) {
// 处理成功会执行
})
.catch(function (err){
// 处理失败会执行
})
.always(function () {
// 不管是成功失败，都会执行
});