移动应用中用户往往需要上传照片,但是用户上传的照片尺寸通常很大,而手机的流量却很有限,所以在上传前对图像进行压缩是很有必要的. 原生应用可以直接对文件进行处理,网页应用就没有这个优势了.不过 canvas 的出现给出一条新的思路,将图像按照比例绘制到画布上,最后将绘制完成的画布以 base64 编码方式发送到服务端,再由服务端进行解析还原成图片. 由于进行处理的过程较为复杂,于是 localResizeIMG 就孕育而生了,它简化了前端压缩图片的步骤,减轻了前端工程师的工作负担.Github:h…

微信上传图片是经常使用的功能,首先说一下使用的是:localResizeIMG进行图片压缩上传.感觉还是很好用,基本上功能都能满足. 但是最近在开发这个功能时遇到一个奇怪的问题,就是iphone|ipad|ipod|测试都没有问题,都能上传成功.可是有些安卓机却总是上传不上去,也没有任何错误提示.最后楼主通过web开发工具的移动调试功能,发现在android下会报: weixin://preInjectJSBridge/fail. 通过上网搜了一番,大概知道问题原因了:是因为js代码中使用了部分…

现在科技太发达,移动设备像素越来越高,随便一张照片2M+,但是要做移动端图片上传和pc上略有不同,移动端你不能去限制图片大小,让用户先处理图片再上传,这样不现实.所以理解的解决方案就是在上传先进行图片压缩,然后再把压缩后的图片上传到服务器. 一翻google之后,发现了localResizeIMG,它会对图片进行压缩成你指定宽度及质量度并转换成base64图片格式,那么我们就可以把这个base64通过ajax传到后台,再进行保存,先压缩后上传的目的就达到了. 处理过程 LocalResizeIM…

http://think2011.net/localResizeIMG/test/ 演示一下 自己试试 点我直接进入演示页面 说明 在客户端压缩好要上传的图片可以节省带宽更快的发送给后端,特别适合在移动设备上使用. 为什么需要 已踩过很多坑,经过几个版本迭代,以及很多很多网友的反馈帮助.机型测试 图片扭曲.某些设备不自动旋转图片方向,没有jpeg压缩算法.. 不支持new Blob,formData构造的文件size为0.. 还有某些机型和浏览器(例如QQX5浏览器)莫名其妙的BUG.. 按需加…

LocalResizeIMG前端HTML5本地压缩图片上传,兼容移动设备IOS,android jincon 发表于 2015-02-26 18:31:01 发表在: php开发 localresizeimg-概述 通常压缩图片需要上传到后端,由后端处理. 但是如果要上传的图片很大,特别是手机当场拍摄下来的照片(约2M+),那样效率会很低,用户也不会愿意等待. 现在能够由前端本地压缩的话,效率将会极大的提升. 这个玩意很强大的地方就在于他可以在HTML5 前端压缩 ,大大加快了上传速度,以及节约…

示例 /** * 本地图片压缩后上传 */ $("#vfile").change(function(){ var _this = $(this); lrz(this.files[0],{width: 1024,quality :1,fieldName:'file'}).then(function(data) { return upload(_this.get(0) , data.formData); }).then(function(data) { // data => 上传成功…

localResizeIMG插件的功能是将图片进行压缩,然后转换成base64传给后台. 首先, npm i lrz -save 然后,再main.js里面引入lrz import lrz from 'lrz' 最后就可以在组件里使用 <input type="file" @change="uploadImg($event)" id="file" accept="image/*" class="uploadIm…

惯例,先贴传送门:https://github.com/think2011/localResizeIMG 首先说到,为嘛要压缩图片,这需求一般出现在需要上传照片(尤其是移动端)的情况下,现在手机拍出来的照片随随便便就是好几兆,无论3/4G还WIFI要上传都很吃力,而且实际上也用不着这么大呀,一般压缩到个一百几十k就够用了.因此,我们需要在用户选好照片(可能是从相册中选择也可能是直接拍摄,看我博客的另一篇文章:html5 api:device's media capture mechanism(设…

涉及到网页图片的交互,少不了图片的压缩上传,相关的插件有很多,相信大家都有用过,这里我就推荐三款,至于好处就仁者见仁喽: 1.名气最高的WebUploader,由Baidu FEX 团队开发,以H5为主,FLASH为辅,兼容 IE6+,iOS 6+, android 4+,采用大文件分片并发上传,极大的提高了文件上传效率,看了官方文档就知道,能满足你所需要的所有功能,一言以蔽之,大而全:至于缺点,大概就是插件体积太大了,自带样式文件,而且还要依赖jquery类库.详细的教程网上俯拾即是,这里我就…

移动h5开发避免不了上传图片,一般我们使用html自带的控件input或者使用微信上传API.但微信上传API不是任何地方都可以使用的,使用html自带的控件input上传又免不了图片体积太大,上传不稳定.localResizeIMG4就是为此而生的. 本文演示版本localResizeIMG 4.9.35. 特点 兼容IOS,Android,PC.自动按需加载文件 支持压缩比例 支持原生JS.jQuery/Zepto 支持Promise特性 使用Base64 下载地址 localResizeI…