js canvas压缩图片上传
$('input[type="file"]').on('change',function(){
var files = !!this.files ? this.files : []; // Create a new instance of the FileReader
var reader = new FileReader(); // Read the local file as a DataURL
reader.readAsDataURL(files[0]); var blob = window.URL.createObjectURL(files[0]);//转换为二进制blob文件
var img=new Image();
img.src=blob;
img.onload = function(){
var cvs = document.createElement('canvas');
var ctx = cvs.getContext("2d");
cvs.width=img.width*.2;
cvs.height=img.height*.2;
ctx.drawImage(this, 0, 0,img.width*.2,img.height*.2);
var newImageData = cvs.toDataURL('image/jpg',1); //input file不能用于上传base64,所以要再加一个input,同时把当前file的input赋值空,防止原图片也上传
this.value="";
$(this).next('input[type="hidden"]').val(newImageData);
}
// When loaded, set image data as background of div
reader.onloadend = function(){
$('#img').attr('src',this.result);//缩略图
}
})
其中的newImageData即为新生成的压缩后的图片base64,上传保存即可。
js canvas压缩图片上传的更多相关文章
- megapix-image插件 使用Canvas压缩图片上传 解决手机端图片上传功能的问题
最近在弄微信端的公众号.订阅号的相关功能,发现原本网页上用的uploadify图片上传功能到手机端有的手机类型上就不能用了,比如iphone,至于为啥我想应该不用多说了吧(uploadify使用fla ...
- canvas 压缩图片上传
问题:前端开发过程中难免会将数据提交到后台,但若是提交的数据过大,特别上传图片这类需求,如果不对上传的图片进行压缩处理,就难免会出现请求时间过长的情况,对于用户体验肯定就不是太友好,那么这时候该如何将 ...
- LocalResizeIMG前端HTML5本地压缩图片上传,兼容移动设备IOS,android
LocalResizeIMG前端HTML5本地压缩图片上传,兼容移动设备IOS,android jincon 发表于 2015-02-26 18:31:01 发表在: php开发 localresiz ...
- js基础进阶--图片上传时实现本地预览功能的原理
欢迎访问我的个人博客:http://www.xiaolongwu.cn 前言 最近在项目上加一个图片裁剪上传的功能,用的是cropper插件,注意到选择本地图片后就会有预览效果,这里整理一下这种预览效 ...
- WebUploader压缩图片上传
WebUploader,由Baidu FEX 团队开发,以H5为主,FLASH为辅,兼容 IE6+,iOS 6+, android 4+,采用大文件分片并发上传,极大的提高了文件上传效率,看了官方文档 ...
- ueditor使用canvas在图片上传前进行压缩
之前就看到H5使用canvas就可以在前端使用JS压缩图片,这次接到任务要把这个功能嵌入到ueditor里面去,以节省流量,减轻服务器压力. H5使用canvas进行压缩的代码有很多,核心原理就是创建 ...
- js 压缩图片 上传
感谢,参考了以下作者的绝大部分内容 https://blog.csdn.net/tangxiujiang/article/details/78755292 https://blog.csdn.net/ ...
- js压缩图片上传插件localResizeIMG
示例 /** * 本地图片压缩后上传 */ $("#vfile").change(function(){ var _this = $(this); lrz(this.files[0 ...
- 基于前台vue,后台是spring boot的压缩图片上传
本人是刚毕业的新手,最近公司的一个项目,前后端分离,前端Vue,后端使用spring boot.其中有一个需求是需要做前端上传的图片需要压缩才能上传.为此在网上查找资料,并做了简单的实现. 那么一步来 ...
随机推荐
- Slackware Linux or FreeBSD 配置中文环境。
配置中文环境. Slackware Linux 如果在控制面板的语言与地区选项中没有找到中文,那说明在安装系统选择软件的时候没有将国际语言支持包选上,可以从slackware的安装盘或ISO文件中提取 ...
- iptables 设置肯限制流量
1.查看本机关于IPTABLES的设置情况 [root@tp ~]# iptables -L -n Chain INPUT (policy ACCEPT) target prot opt source ...
- Android中处理崩溃异常和记录日志
大家都知道,现在安装Android系统的手机版本和设备千差万别,在模拟器上运行良好的程序安装到某款手机上说不定就出现崩溃的现象,开发者个人不可能购买所有设备逐个调试,所以在程序发布出去之后,如果出现了 ...
- js基础练习三之数码时钟
这章节有两个实例,1,定时器的使用; 2,数码时钟; 用到的js知识:定时器,Date对象. >>>>>定时器 开启定时器: setInterval 间隔型 setTim ...
- DELPHI实现百度开放平台
学习百度语音 百度语音开发平台 http://yuyin.baidu.com/ 百度开发者账号 13600514494,短信登录 应用账号 词语听写 App ID: 7799366 API Key: ...
- 制作centos的U盘启动盘
制作centos的U盘启动盘比ubuntu麻烦一些,因为可能涉及到fat32文件格式不支持大于4G的文件存储的问题,而最新版本的centos就是大于4G的,所以就需要对U盘进行分区. 一个做主引导,一 ...
- MS CRM 2013 Plugin 注册工具登录后空白
解决办法 把en-us, zh-CN 目录随便改个名字就好了
- java第六次作业(老师讲过后)
import java.util.*; public class Draw { private ArrayList list; public Draw() { list= new ArrayList( ...
- 50个常用SQL语句
50个常用SQL语句 Student(S#,Sname,Sage,Ssex) 学生表 S#学号,主键 Course(C#,Cname,T#) 课程表 C#课程号,主键 SC(S#, ...
- Vuejs——(2)Vue生命周期,数据,手动挂载,指令,过滤器
(八)传入的数据绑定 先创建一个对象(假如是obj),然后将他传入Vue实例中,作为data属性的值,那么 ①obj的值的变化,将影响Vue实例中的值的变化: ②相反一样: ③可以在Vue实例外面操纵 ...