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.其中有一个需求是需要做前端上传的图片需要压缩才能上传.为此在网上查找资料,并做了简单的实现. 那么一步来 ...
随机推荐
- layzr.js新版使用方法
转载请注明出处:http://www.cnblogs.com/fiter/p/5413919.html 前言 今天研究这个JS库,本人新手,将官方的js代码下载下来后始终无法正常使用,经过多番尝试,终 ...
- HTML5Canvas标签(https://developer.mozilla.org)
- HTML5--拖动02-dragstart、drag、dragenter、dragover、dragleave、drop、dragend属性
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...
- Android中ListView动态加载数据
1. 引言: 为了提高ListView的效率和应用程序的性能,在Android应用程序中不应该一次性加载ListView所要显示的全部信息,而是采取分批加载策略,随着用户的滑动,动态的从后台加载所需的 ...
- Unreleased Resource(未释放资源)-Streams(流)
java中把不同的输入/输出源(键盘.文件.网络连接等)抽象表现为Stream(流). java程序可以通过使用不同的流来访问不同的输入/输出源.而Stream(流)可以直观的理解为从数据的源(Sou ...
- C# 使用BackgroundWorker例子及注意点
该例子为使用BackgroundWorker在TextBox文本中产生一个10000以内并且能被5整除的数(1秒产生一个) 操作界面可以启动线程,也可以停止线程,界面设计如图: 先贴代码,有注释的地方 ...
- 项目中如何GB2312转UTF-8
$str = mb_convert_encoding($str, "gb2312", "UTF-8"); // 这是一个PHP 自带函数 参数1 是要转的字符, ...
- for in for of
for in 循环的是下标 for of 循环的是value let arr = [3, 5, 7]; arr.foo = "hello"; for (let i in ...
- SQL常用语句整理
有次笔试最后一页的三个数据库连接查询,没有写出来,被考官暗讽了下.现在想来,实习初,确实很LOW.现公司刚入职的时候,负责过ETL方面,所以和数据库打了不少交道,五十行的联合查询.上百行的存储过程很常 ...
- request_irq() | 注册中断服务函数【转】
本文转载自:http://blog.csdn.net/wealoong/article/details/7566546#t0 参考 : ARM Linux 中断机制分析.pdf linux-2.6. ...