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

<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. Oracle_索引

    Oracle_索引 索引类似字典的和课本目录,是为了加快对数据的搜索速度而设立的.索引有自己专门的存储空间,与表独立存放. 索引的作用:在数据库中用来加速对表的查询,通过使用快速路径访问方法快速定位数 ...

  2. 本地如何使用phpstudy环境搭建多站点

    http://jingyan.baidu.com/article/e52e36154227ef40c70c5147.html 平时在开发项目的时候, 多个项目同时开发的时候会遇到都得放到根目录才能正常 ...

  3. WaitForXXX等待无效句柄

    =================================版权声明================================= 版权声明:原创文章 禁止转载  请通过右侧公告中的“联系邮 ...

  4. 给外行或者刚入门普及一下关于C#,.NET Framework（.NET框架）,.Net,CLR,ASP,ASP.Net, VS,以及.NET Core的概念

    一.概念 1. C# :C#是微软公司发布的一种面向对象的.运行于.NET Framework之上的高级程序设计语言. 2..NET Framework(.NET框架):.NET framework ...

  5. ExtJS是一种主要用于创建前端用户界面，是一个基本与后台技术无关的前端ajax框架。

    ExtJS是一种主要用于创建前端用户界面,是一个基本与后台技术无关的前端ajax框架.

  6. jQuery——动态给表格添加序号

    摘录自:http://www.cnblogs.com/picaso/archive/2012/10/08/2715564.html 很多时候遇到需要对表格动态操作,而且一般都会有表格的序号,但是有时候 ...

  7. linux 动态库的符号冲突问题

    最近,给同事定位了一个符号表的冲突问题,简单记录一下. A代码作为静态链接库,被包含进了B代码,然后编译成了动态链接库,B.so A代码同时作为静态链接库,被编译进入了main的主代码. main函数 ...

  8. eclipse启动报错the catalog could not be loaded please ensure that you have network access and if needed have configured your network proxy

    搜索关键词不对在网上查了一圈没找到合适的解决办法 去看报错的日志文件 然并卵.不过下面有个config.ini,想着以前能用现在不能用,肯定是配置问题,打开该文件 转载请注明出处http://www. ...

  9. 珍爱生命,远离JS=>JS避坑记

    JavaScript避坑记 转载请注明源地址: http://www.cnblogs.com/funnyzpc/p/8407952.html 上图=> 有意思的漫画,不知大家看懂了没,这里我想说 ...

  10. HARBOR 仓库 API功能接口

    1       项目管理 1.1     查看仓库中项目详细信息 curl -u "admin:Harbor12345" -X GET -H "Content-Type: ...