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

<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. phpstudy最新版中php5.6版报错

  2. YAML书写规范

    1. 认识 YAML YAML是一个类似 XML.JSON 的标记性语言.YAML 强调以数据为中心,并不是以标识语言为重点.因而 YAML 本身的定义比较简单,号称"一种人性化的数据格式语 ...

  3. 服务器大量的fin_wait1 状态长时间存在原因分析-1

    上文描述了在出现大量fin-wait-1出现的原因,占用的内存等,这里讲一下如何处理这种情况. 首先,fin发送之后,有可能会丢弃,那么发送多少次这样的fin包呢?fin包的重传,也会采用退避方式,在 ...

  4. 安卓开发-intent在Activity之间数据传递

    安卓开发-intent在Activity之间数据传递 [TOC] intent实现普通跳转 使用intent的setclass方法,示例(由此界面跳转到NewActivity界面) //使用setOn ...

  5. 如何让a标签的下划线去掉？

    在css中添加 a{ text-decoration: none; }

  6. 定时任务schedule(quartz)

    1, 简介Quartz是一个任务调度框架.核心类:Scheduler  :调度器,所有Job的调度都是由它控制;JobDetail   :生成Job对象的实例,存储Job对象需要的参数;Job     ...

  7. Nginx+Geoserver部署所遇问题总结

    文章版权由作者李晓晖和博客园共有,若转载请于明显处标明出处:http://www.cnblogs.com/naaoveGIS/ 1.背景 该问题的最终解决离不开公司大拿whs先生的指点,先表示感谢. ...

  8. raid制作(转载)

    Dell r710服务器,有4块450G硬盘,默认做的RAID5.我们的目的是取其中3块硬盘做RAID5,留一块硬盘做热备. 在这里,我具体解释一下 ①4块硬盘做成RAID5 ②3块硬盘做RAID5, ...

  9. LVS负载均衡介绍

    LVS介绍 负载均衡器 • 链路负载均衡 (三层负载均衡) • 服务器负载均衡 (四层负载均衡) • 应用层负载均衡 (七层负载均衡) • 全局负载均衡 基本情况 • 实现服务器负载均衡 • 核心功能 ...

  10. 前端-高潮 jQuery

    jQuery:就是让页面动起来 参考手册:http://jquery.cuishifeng.cn/ DOM/BOM/javaScript 继承的类库 <--->模块 一.查找元素 二.操作 ...