js上传图片压缩

js实现图片压缩后上传

用到的技术:

  1. canvas相关api
  2. html5的一些api

兼容性:

h5没发现问题,pc低版本浏览器不支持

实现思路:

  • 监听文件域的上传,通过FileReader api获取到图片的原始数据
  • 计算压缩后的宽高,然后通过画到canvas上在截取出压缩后的数据




    
    
    
    Document

以上参考了 张鑫旭的HTML5 file API加canvas实现图片前端JS压缩并上传

欢迎纠错(完)

你可能感兴趣的:(javascripthtml5)

  • Vue、fabricJS 画布实现自由绘制折线 Thetimezipsby 常用代码块vue.js前端javascriptfabric
    作者GitHub：https://github.com/gitboyzcf有兴趣可关注Vue3代码，Vue2相似改吧改吧前言Fabric.jsFabric.js（英文官网）是一个强大而简单的JavascriptHTML5画布库（也就是针对canvas进行的封装操作，使用起来更方便）Fabric在画布元素的顶部提供交互式对象模型、Fabric还具有SVG到画布（以及画布到SVG）解析器安装npmin
  • 2 万 Star！一个强大而简单的 JS 画布库 ide
    来源于前端超人，作者荣顶导语我们想在画布上画个基本的简单形状的时候，使用Canvas不会觉得有什么繁琐。但当画布上需要任何形式的互动，绘制复杂的图形和在特定情况需要改变图片的时候,使用原生canvasAPI将会变得很困难。而Fabric旨在解决这个问题。https://github.com/fabricjs/f...Fabric.js是一个强大而简单的JavascriptHTML5画布库。Fabr
  • 今日学思 挣脱吧小白
    一、HTML5介绍注意：HTML5永远都不可能脱离javaScriptHTML5在移动端支持好于PC端二、HTML5新表单input新类型email:验证是否包含@search:搜索框url:验证是否包含httptel:效果只能在移动端出现number:数字选择minmaxsteprange:范围类型minmaxstepvaluecolor:颜色选择器date:日期类型week:星期类型month
  • 重磅！支付宝小程序悄然上线_分享能力更强大！ofo小程序怒怼摩拜小程序 bystarlight
    原文链接重磅！支付宝小程序悄然上线，分享能力更强大！ofo小程序怒怼摩拜小程序allen_li2017-05-0617:27:49浏览112评论0移动开发与客户端javascripthtml5测试钉钉API摘要：支付宝小程序功能与微信小程序相仿，不同的是，支付宝将解决流量分发问题。enable（帮助）B服务C，也就是用互联网的技术、产品帮助商家更好地服务用户，是一个长期的过程。支付宝小程序功能与微
  • 前端控制菜单点击和悬浮样式（一）by JavaScript 前端小菜B 前端点滴
    本章不解读JavaScriptHTML5和CSS的基本用法，只对JS控制的逻辑做讲解。如果没有相应基础的，可留言提问。1.结构层，编写HTML：此处不粘贴声明，我用的是H5，即：绑定事件有多种方法，此处用最简单的HTML内嵌。MenuOneMenuTwoMenuThreeMenuFour2.表现层，菜单基本样式代码：CSS采用LESS预编译工具，以下是LESS源码：小普及：LESS是减少代码冗余的
  • HTML5和CSS3 氪金万岁~
    HTML5html5泛称：html5，CSS3，JavaScriptHTML5文档类型文档第一行代码表示的是当前文档的类型，告诉浏览器当前文档是按照html的类型进行的编译执行html5和html之间的区别？首先在文档类型的书写上不同，html5中新增了一些语义化的标签以及表单属性和表单的类型，还包含有新的伪类，伪元素选择器。其次，html5的要求更简单，简洁，在书写上面没有一定的要求。规范的区别
  • 前端获取视频流并播放 Shensgのblog
    2017-09-05前端获取视频流并播放JavaScripthtml5出来后，前端播放视频瞬间变得方便容易多了，一个标签就可以搞定,只要给src属性正确的文件路径即可。但是当视频在服务器中时，就需要从后台向前台传输视频流才可以播放。JAVA@RequestMapping(value="/getFileSrc",method=RequestMethod.GET)@ResponseBodypubl
  • HTML5的新特性 joy_enheng
    1.新的文档类型HTML5简化了文档类型的声明方式。之前的文档类型的声明方式非常复杂2.脚本和链接无需type在网页中添加css或者JavaScriptHTML5中，不需要指定type属性：在XHTML或者HTML4中：3.新增语义化标签、、、、,、、、等。4.占位符（Placeholder）placeholder解决了之前需要通过js来给文本添加占位符（input的placeholder属性）5
  • 使用pdf.js插件与LODOP控件实现前端浏览器静默打印PDF文件 gajicat 工作日志
    任务：作为智能终端自助打印系统的一部分，需在前端浏览器打印从服务端获取的Base64编码形式的pdf文件。实现原理：页面javaScrip通过atob函数将服务端获取的base64编码转换为pdf文件对象，使用pdf.jsAPI加载到页面元素，转为png图片的Base64编码，调用LODOP控件预览打印或直接打印。运行环境：Firefox，IE，Chrome编码语言：JavaScripthtml5
  • Web 前端技术学习路线图 Shadow_Weirdo 前端学习
    如何一步步掌握前端技术呢？下面推荐一个学习路线图，希望对初学者有帮助。Javascript语言：全栈开发中，用的编程语言就是javascriptHTML5标签和DOM：这是前端最核心技术，为之后学习各种开发框架，打下坚实基础。CSS3：学习通过css开发网页和各种可视UI组件。SASS：利用sass语言，开发复杂的页面cssNode.js：掌握Node.js核心API，具备后端开发能力。Expre
  • 基于javascript html5实现多文件上传 weapon-x
    本文实例为大家分享了javascripthtml5实现多文件上传的实现方法，具体内容如下HTML结构：请选择一个图像文件：顺便说下这个上传的主要逻辑：用input标签并选择type=file，记得带上multiple，不然就只能单选图片了绑定好input的change时间，重点就是如何处理这个change事件了，使用H5新的FileReader接口读取文件并打成base64编码，之后的事就是与后端
  • 开发资源总结, 都是干货 ~ (持续整理中) lyfeyaj 综合
    这是对自己这几年开发的一个总结，各种项目、资源、书籍、博客等。作为我自己的一个阶段性总结，也希望对大家有些帮助。点击地址：开发资源总结查看欢迎大家各种拍砖、纠错、最好是有PullRequest目录Web前端JavascriptHTML5相关AngularJSCSSICONWeb后端RubyPythonNode.jsExpressErlangJavaC/C++GoIOS或OSXAndroid代码效率
  • 开发资源总结, 都是干货 ~ (持续整理中 已 60%) lyfeyaj 综合
    这是对自己这几年开发的一个总结，各种项目、资源、书籍、博客等。作为我自己的一个阶段性总结，也希望对大家有些帮助。点击地址：开发资源总结查看详情欢迎大家各种拍砖、纠错、最好是有PullRequest目录Web前端JavascriptHTML5相关AngularJSCSSICONWeb后端RubyPythonNode.jsExpressErlangJavaC/C++GoIOS或OSXAndroid代码
  • 对于规范和实现，你会混淆吗？ yangshangchuan HotSpot
    昨晚和朋友聊天，喝了点咖啡，由于我经常喝茶，很长时间没喝咖啡了，所以失眠了，于是起床读JVM规范，读完后在朋友圈发了一条信息： JVM Run-Time Data Areas：The Java Virtual Machine defines various run-time data areas that are used during execution of a program. So
  • android 网络 百合不是茶 网络
    android的网络编程和java的一样没什么好分析的都是一些死的照着写就可以了,所以记录下来  方便查找   ,  服务器使用的是TomCat   服务器代码;  servlet的使用需要在xml中注册 package servlet; import java.io.IOException; import java.util.Arr
  • [读书笔记]读法拉第传 comsci 读书笔记
          1831年的时候,一年可以赚到1000英镑的人..应该很少的...       要成为一个科学家,没有足够的资金支持,很多实验都无法完成       但是当钱赚够了以后....就不能够一直在商业和市场中徘徊......
  • 随机数的产生 沐刃青蛟 随机数
    c++中阐述随机数的方法有两种：   一是产生假随机数（不管操作多少次，所产生的数都不会改变）          这类随机数是使用了默认的种子值产生的，所以每次都是一样的。   //默认种子 for (int i = 0; i < 5; i++) { cout<<
  • PHP检测函数所在的文件名 IT独行者 PHP函数
    很简单的功能，用到PHP中的反射机制，具体使用的是ReflectionFunction类，可以获取指定函数所在PHP脚本中的具体位置。 创建引用脚本。 代码：   [php]   view plain copy // Filename: functions.php    <?php&nbs
  • 银行各系统功能简介 文强chu 金融
    银行各系统功能简介 　 业务系统 核心业务系统 业务功能包括：总账管理、卡系统管理、客户信息管理、额度控管、存款、贷款、资金业务、国际结算、支付结算、对外接口等 清分清算系统 以清算日期为准，将账务类交易、非账务类交易的手续费、代理费、网络服务费等相关费用，按费用类型计算应收、应付金额，经过清算人员确认后上送核心系统完成结算的过程 国际结算系
  • Python学习1(pip django 安装以及第一个project) 小桔子 pythondjangopip
        最近开始学习python,要安装个pip的工具。听说这个工具很强大，安装了它，在安装第三方工具的话so easy!然后也下载了，按照别人给的教程开始安装，奶奶的怎么也安装不上！ 第一步：官方下载pip-1.5.6.tar.gz, https://pypi.python.org/pypi/pip easy! 第二部：解压这个压缩文件，会看到一个setup.p
  • php 数组 aichenglong PHP排序数组循环多维数组
    1 php中的创建数组 $product = array('tires','oil','spark');//array()实际上是语言结构而不  是函数 2 如果需要创建一个升序的排列的数字保存在一个数组中，可以使用range()函数来自动创建数组 $numbers=range(1,10)//1 2 3 4 5 6 7 8 9 10 $numbers=range(1,10,
  • 安装python2.7 AILIKES python
    安装python2.7 1、下载可从 http://www.python.org/进行下载#wget https://www.python.org/ftp/python/2.7.10/Python-2.7.10.tgz 2、复制解压 #mkdir -p /opt/usr/python #cp  /opt/soft/Python-2
  • java异常的处理探讨 百合不是茶 JAVA异常
    //java异常  /* 1，了解java 中的异常处理机制，有三种操作 a,声明异常  b,抛出异常  c,捕获异常 2，学会使用try-catch-finally来处理异常 3，学会如何声明异常和抛出异常 4，学会创建自己的异常   */   //2，学会使用try-catch-finally来处理异常  
  • getElementsByName实例 bijian1013 element
    实例1： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/x
  • 探索JUnit4扩展：Runner bijian1013 java单元测试JUnit
            参加敏捷培训时，教练提到Junit4的Runner和Rule，于是特上网查一下，发现很多都讲的太理论，或者是举的例子实在是太牵强。多搜索了几下，搜索到两篇我觉得写的非常好的文章。         文章地址：http://www.blogjava.net/jiangshachina/archive/20
  • [MongoDB学习笔记二]MongoDB副本集 bit1129 mongodb
    1. 副本集的特性   1)一台主服务器(Primary),多台从服务器(Secondary)   2)Primary挂了之后，从服务器自动完成从它们之中选举一台服务器作为主服务器，继续工作，这就解决了单点故障，因此，在这种情况下，MongoDB集群能够继续工作   3)挂了的主服务器恢复到集群中只能以Secondary服务器的角色加入进来   2
  • 【Spark八十一】Hive in the spark assembly bit1129 assembly
    Spark SQL supports most commonly used features of HiveQL. However, different HiveQL statements are executed in different manners: 1. DDL statements (e.g. CREATE TABLE, DROP TABLE, etc.)
  • Nginx问题定位之监控进程异常退出 ronin47
    nginx在运行过程中是否稳定，是否有异常退出过？这里总结几项平时会用到的小技巧。 1. 在error.log中查看是否有signal项，如果有，看看signal是多少。 比如，这是一个异常退出的情况： $grep signal error.log 2012/12/24 16:39:56 [alert] 13661#0: worker process 13666 exited on s
  • No grammar constraints (DTD or XML schema).....两种解决方法 byalias xml
    方法一：常用方法   关闭XML验证 工具栏：windows => preferences => xml => xml files => validation => Indicate when no grammar is specified:选择Ignore即可。 方法二：（个人推荐） 添加 内容如下 <?xml version=
  • Netty源码学习-DefaultChannelPipeline bylijinnan netty
    package com.ljn.channel; /** * ChannelPipeline采用的是Intercepting Filter 模式 * 但由于用到两个双向链表和内部类，这个模式看起来不是那么明显，需要仔细查看调用过程才发现 * * 下面对ChannelPipeline作一个模拟，只模拟关键代码： */ public class Pipeline {
  • MYSQL数据库常用备份及恢复语句 chicony mysql
    备份MySQL数据库的命令，可以加选不同的参数选项来实现不同格式的要求。 mysqldump -h主机 -u用户名 -p密码 数据库名 > 文件 备份MySQL数据库为带删除表的格式，能够让该备份覆盖已有数据库而不需要手动删除原有数据库。 mysqldump -–add-drop-table -uusername -ppassword databasename > ba
  • 小白谈谈云计算--基于Google三大论文 CrazyMizzz Google云计算GFS
        之前在没有接触到云计算之前，只是对云计算有一点点模糊的概念，觉得这是一个很高大上的东西，似乎离我们大一的还很远。后来有机会上了一节云计算的普及课程吧，并且在之前的一周里拜读了谷歌三大论文。不敢说理解，至少囫囵吞枣啃下了一大堆看不明白的理论。现在就简单聊聊我对于云计算的了解。     我先说说GFS   &n
  • hadoop 平衡空间设置方法 daizj hadoopbalancer
    在hdfs-site.xml中增加设置balance的带宽，默认只有1M： <property>   <name>dfs.balance.bandwidthPerSec</name>     <value>10485760</value>     <description&g
  • Eclipse程序员要掌握的常用快捷键 dcj3sjt126com 编程
      判断一个人的编程水平，就看他用键盘多，还是鼠标多。用键盘一是为了输入代码（当然了，也包括注释），再有就是熟练使用快捷键。 曾有人在豆瓣评 《卓有成效的程序员》：“人有多大懒，才有多大闲”。之前我整理了一个 程序员图书列表，目的也就是通过读书，让程序员变懒。  程序员作为特殊的群体，有的人可以这么懒，懒到事情都交给机器去做，而有的人又可以那么勤奋，每天都孜孜不倦得
  • Android学习之路 dcj3sjt126com Android学习
    转自：http://blog.csdn.net/ryantang03/article/details/6901459 以前有J2EE基础，接触JAVA也有两三年的时间了，上手Android并不困难，思维上稍微转变一下就可以很快适应。以前做的都是WEB项目，现今体验移动终端项目，让我越来越觉得移动互联网应用是未来的主宰。 下面说说我学习Android的感受，我学Android首先是看MARS的视
  • java 遍历Map的四种方法 eksliang javaHashMapjava 遍历Map的四种方法
    转载请出自出处： http://eksliang.iteye.com/blog/2059996 package com.ickes; import java.util.HashMap; import java.util.Iterator; import java.util.Map; import java.util.Map.Entry; /** * 遍历Map的四种方式
  • 【精典】数据库相关相关 gengzg 数据库
    package C3P0; import java.sql.Connection; import java.sql.SQLException; import java.beans.PropertyVetoException; import com.mchange.v2.c3p0.ComboPooledDataSource; public class DBPool{
  • 自动补全 huyana_town 自动补全
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml&quo
  • jquery在线预览PDF文件，打开PDF文件 天梯梦 jquery
    最主要的是使用到了一个jquery的插件jquery.media.js，使用这个插件就很容易实现了。   核心代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.
  • ViewPager刷新单个页面的方法 lovelease androidviewpagertag刷新
      使用ViewPager做滑动切换图片的效果时，如果图片是从网络下载的，那么再子线程中下载完图片时我们会使用handler通知UI线程，然后UI线程就可以调用mViewPager.getAdapter().notifyDataSetChanged()进行页面的刷新，但是viewpager不同于listview，你会发现单纯的调用notifyDataSetChanged()并不能刷新页面
  • 利用按位取反（~）从复合枚举值里清除枚举值 草料场 enum
    以 C# 中的 System.Drawing.FontStyle 为例。   如果需要同时有多种效果， 如：“粗体”和“下划线”的效果，可以用按位或（|） FontStyle style = FontStyle.Bold | FontStyle.Underline;   如果需要去除 style 里的某一种效果，
  • Linux系统新手学习的11点建议 刘星宇 编程工作linux脚本
    　　随着Linux应用的扩展许多朋友开始接触Linux，根据学习Windwos的经验往往有一些茫然的感觉：不知从何处开始学起。这里介绍学习Linux的一些建议。 　　一、从基础开始：常常有些朋友在Linux论坛问一些问题，不过，其中大多数的问题都是很基础的。例如：为什么我使用一个命令的时候，系统告诉我找不到该目录，我要如何限制使用者的权限等问题，这些问题其实都不是很难的，只要了解了 Linu
  • hibernate dao层应用之HibernateDaoSupport二次封装 wangzhezichuan DAOHibernate
    /** * <p>方法描述:sql语句查询 返回List<Class> </p> * <p>方法备注: Class 只能是自定义类 </p> * @param calzz * @param sql * @return * <p>创建人：王川</p> * <p>创建时间：Jul
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他