$('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压缩图片上传的更多相关文章

  1. megapix-image插件 使用Canvas压缩图片上传 解决手机端图片上传功能的问题

    最近在弄微信端的公众号.订阅号的相关功能,发现原本网页上用的uploadify图片上传功能到手机端有的手机类型上就不能用了,比如iphone,至于为啥我想应该不用多说了吧(uploadify使用fla ...

  2. canvas 压缩图片上传

    问题:前端开发过程中难免会将数据提交到后台,但若是提交的数据过大,特别上传图片这类需求,如果不对上传的图片进行压缩处理,就难免会出现请求时间过长的情况,对于用户体验肯定就不是太友好,那么这时候该如何将 ...

  3. LocalResizeIMG前端HTML5本地压缩图片上传,兼容移动设备IOS,android

    LocalResizeIMG前端HTML5本地压缩图片上传,兼容移动设备IOS,android jincon 发表于 2015-02-26 18:31:01 发表在: php开发 localresiz ...

  4. js基础进阶--图片上传时实现本地预览功能的原理

    欢迎访问我的个人博客:http://www.xiaolongwu.cn 前言 最近在项目上加一个图片裁剪上传的功能,用的是cropper插件,注意到选择本地图片后就会有预览效果,这里整理一下这种预览效 ...

  5. WebUploader压缩图片上传

    WebUploader,由Baidu FEX 团队开发,以H5为主,FLASH为辅,兼容 IE6+,iOS 6+, android 4+,采用大文件分片并发上传,极大的提高了文件上传效率,看了官方文档 ...

  6. ueditor使用canvas在图片上传前进行压缩

    之前就看到H5使用canvas就可以在前端使用JS压缩图片,这次接到任务要把这个功能嵌入到ueditor里面去,以节省流量,减轻服务器压力. H5使用canvas进行压缩的代码有很多,核心原理就是创建 ...

  7. js 压缩图片 上传

    感谢,参考了以下作者的绝大部分内容 https://blog.csdn.net/tangxiujiang/article/details/78755292 https://blog.csdn.net/ ...

  8. js压缩图片上传插件localResizeIMG

    示例 /** * 本地图片压缩后上传 */ $("#vfile").change(function(){ var _this = $(this); lrz(this.files[0 ...

  9. 基于前台vue,后台是spring boot的压缩图片上传

    本人是刚毕业的新手,最近公司的一个项目,前后端分离,前端Vue,后端使用spring boot.其中有一个需求是需要做前端上传的图片需要压缩才能上传.为此在网上查找资料,并做了简单的实现. 那么一步来 ...

随机推荐

  1. update kernel 3.10-3.12

    安装包下载以及依赖包安装 1.到www.kernel.org下载3.12.48压缩包 2.tar xvf linux-3.12.48.tar.xz 3.sudo yum install ncurses ...

  2. 导入csv文件到mysql

    原文 给自己做备份的,高手们请忽略. 数据太大,用数据库客户端软件直接导入非常卡,还是直接执行SQL吧. 1.指定文件路径. 2.字段之间以逗号分隔,数据行之间以\r\n分隔(我这里文件是以\n分隔的 ...

  3. javascript获取当前url

    在WEB开发中,许多开发者都比较喜欢使用javascript来获取当前url网址,本文就此为大家总结一下比较常用获取URL的javascript实现代码,以下示例是前面为相应实现方法,后面是获取URL ...

  4. android手机和ios手机的分辨率

    Android手机目前常见的分辨率 1.1 手机常见分辨率: 4:3 VGA     640*480 (Video Graphics Array) QVGA  320*240 (Quarter VGA ...

  5. 浅谈Java中的引用

    在Java语言中,引用是指,某一个数据,代表的是另外一块内存的的起始地址,那么我们就称这个数据为引用. 在JVM中,GC回收的大致准则,是认定如果不能从根节点,根据引用的不断传递,最终指向到一块内存区 ...

  6. eclipse安装zylin embedded cdt失败解决办法

    最近再搞嵌入式开发,之前用惯了IDE调试单片机的那种方式,开发2440和am3358驱动时候无法方便的查看寄存器和变量,憋的抓耳挠腮,不爽得很,没有可视化环境进行实时调试观察,太特么蛋疼了.感觉这种情 ...

  7. Python练习,网络小爬虫(初级)

    最近还在看Python版的rcnn代码,附带练习Python编程写一个小的网络爬虫程序. 抓取网页的过程其实和读者平时使用IE浏览器浏览网页的道理是一样的.比如说你在浏览器的地址栏中输入    www ...

  8. 浅谈UI设计中妙用无穷的深色系背景

    英文:medium 译者:优设网 - 陈子木 链接:http://www.uisdc.com/ui-benefits-of-dark-background# --------------------- ...

  9. CopyFile类通过调用这个类的delete(String filePath)方法可以组合成一个Cut类

    package folderoperation; import java.io.File;/** * 注意它会删除文件,文件夹以及文件夹下的所有内容(根据指定的地址) * @author Dawn * ...

  10. C#中try catch中throw ex和throw方式抛出异常有何不同

    我们在C#的try catch代码块中里面经常使用throw语句抛出捕捉到的异常,但是你知道吗使用throw ex和throw抛出捕获到的异常效果是不一样的. 异常捕捉的原理 首先先介绍一下C#异常捕 ...