初学有不当之处，请多多指点，

<body>
　　<div class="cc">
　　　　<input type="file" id="file" onchange="imgChange()" accept="image/*">
　　</div>
　　<img src="" id="showImage" alt="">
<!-- <canvas id="canvas" style="display: none;"></canvas> -->

<script>
　　function imgChange(){
　　　　var file = document.getElementById('file').files[0] //获取选择上传的图片文件

　　　　var reader = new FileReader() //声明一个新构的FileReader
　　　　reader.readAsDataURL(file) //把图片变成base64
　　　　reader.onload = function(){

　　　　　　var showImage = document.getElementById('showImage')

　　　　　　if (file.size > 100 * 100) { //判断图片的大小
　　　　　　　　showImage.src = reader.result //赋值给img选择的图片
　　　　　　　　showImage.onload = function(){ //当img全部加载完后
　　　　　　　　　　var canvas = document.createElement('canvas')//创建canvas对象
　　　　　　　　　　canvas.width = this.width //设置画布的宽高和showImage图片的大小一致
　　　　　　　　　　canvas.height = this.height
　　　　　　　　　　var cgt = canvas.getContext('2d') //设置二维画布环境
　　　　　　　　　　cgt.drawImage(this,0,0,canvas.width,canvas.height)

　　　　　　　　　　showImage.src = canvas.toDataURL("image/jpeg", 0.4) //改变画布的格式和图片质量
　　　　　　　　}
　　　　}
　　　　else{
　　　　　　showImage.src = reader.result
　　　　}
　　}

}
</script>
</body>

js压缩上传图片的更多相关文章

  1. js压缩上传图片base64长度

    im发送图片,现将图片压缩再上传 1) 调用 FileReader 的 reader.readAsDataURL(img); 方法, 在其onload事件中, 将用户选择的图片读入 Image对象. ...

  2. js压缩图片base64长度

    var myCanvas=$('.img-container > img').cropper('getCroppedCanvas'); (function (base64){ var image ...

  3. 图片纯前端JS压缩的实现

    一.图片上传前端压缩的现实意义 对于大尺寸图片的上传,在前端进行压缩除了省流量外,最大的意义是极大的提高了用户体验. 这种体验包括两方面: 由于上传图片尺寸比较小,因此上传速度会比较快,交互会更加流畅 ...

  4. HTML5 file API加canvas实现图片前端JS压缩并上传

    一.图片上传前端压缩的现实意义 对于大尺寸图片的上传,在前端进行压缩除了省流量外,最大的意义是极大的提高了用户体验. 这种体验包括两方面: 由于上传图片尺寸比较小,因此上传速度会比较快,交互会更加流畅 ...

  5. 【DWR系列06】- DWR日志及js压缩

    img { border: solid 1px } 一.日志 DWR依赖 Apache Commons Logging,可以使用log4j实现日志记录功能. 1.1 日志简介 和其他日志框架一样,当设 ...

  6. 26、ASP.NET MVC入门到精通——后台管理区域及分离、Js压缩、css、jquery扩展

    本系列目录:ASP.NET MVC4入门到精通系列目录汇总 有好一段时间没更新博文了,最近在忙两件事:1.看书,学习中...2.为公司年会节目做准备,由于许久没有练习双截棍了,难免生疏,所以现在临时抱 ...

  7. gulp-uglify《JS压缩》----gulp系列（四)

    本节实现JS压缩,在实现压缩前,先配置JS任务,设置源目录和输出目录. 在系列(三)代码的基础上,再进行扩展. 1.找到gulp->config.js,对JS进行源目录(src->img) ...

  8. js压缩、混淆和加密

    最近看到有些论坛在讨论js压缩.混淆和加密的问题,特意找了些资料看了下,现在总结一下: 1.关于三者的定义与区别 压缩:删除 Javascript 代码中所有注释.跳格符号.换行符号及无用的空格,从而 ...

  9. JS判断上传图片格式是否正确

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...

随机推荐

  1. java常量池詳解

    一.相关概念 什么是常量用final修饰的成员变量表示常量,值一旦给定就无法改变!final修饰的变量有三种:静态变量.实例变量和局部变量,分别表示三种类型的常量. Class文件中的常量池在Clas ...

  2. JAVA：成员变量和局部变量的区别

    1.作用于不同: 局部变量的作用域仅限于定义它的方法 成员变量的作用域在整个类的内部都是可见的 2.初始值不同 JAVA会给成员变量一个初始值 JAVA不会给局部变量赋予初始值 3.在同一个方法中,不 ...

  3. 使用 video.js 开发 HTML5 视频页面

    时间 2015-05-13 17:11:58 The GIS Guy 原文  http://thegisguy.tk/html5-video-using-video-js/ 主题 Video.js H ...

  4. [bx]和loop指令

    body, table{font-family: 微软雅黑; font-size: 13.5pt} table{border-collapse: collapse; border: solid gra ...

  5. PowerCLI: One-Liner to get VMs, Clusters, ESX Hosts and Datastores并导入数据库中

    需求:定期自动获取Vm在VCenter中对应的cluster.ESX.Datastore信息,同时将变化或者新增的数据上传到数据库中 解决思路分析: 1 首先使用VMware的powerCLI工具通过 ...

  6. Linux 中su和sudo命令的几个注意点

    1 su与su - 的区别 1.1命令说明 su对应是是no-login shell的方式进行账号登陆,命令行的变量配置还是切换账号前的变量. su-对应的是login shell的方式进行账号登陆, ...

  7. java虚拟机和java内存区域概述

    什么是虚拟机,什么是Java虚拟机 虚拟机 定义:模拟某种计算机体系结构,执行特定指令集的软件 系统虚拟机(Virtual Box.VMware),进程虚拟机 进程虚拟机 jvm.Adobe Flas ...

  8. 自己模拟的一个简单的web服务器

    首先我为大家推荐一本书:How Tomcat Works.这本书讲的很详细的,虽然实际开发中我们并不会自己去写一个tomcat,但是对于了解Tomcat是如何工作的还是很有必要的. Servlet容器 ...

  9. maven项目添加findbugs，checkstyle，jacoco，assembly，maven-jar-plugin插件的配置

    (1)名称解释(插件的作用) findbugs:检测代码的不明显的语法错误.例如:用了==去比较字符串,定义了没有用的变量-- checkstyle:检测代码的格式规范.例如:方法没有写注释,类的命名 ...

  10. IO （一）

    1 IO(Input Output)流概述 IO流用来处理设备之间的数据传输. java对数据的操作是通过流的方式. java用于操作流的对象都在IO包中. 流按操作数据分为两种:字节流和字符流. 流 ...