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

<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. b2b2c

    编辑 B2B2C是一种电子商务类型的网络购物商业模式,B是BUSINESS的简称,C是CUSTOMER的简称,第一个B指的是商品或服务的供应商,第二个B指的是从事电子商务的企业,C则是表示消费者.   ...

  2. 数据库连接池（c3p0）

    (一)问题的提出: 在使用开发基于数据库的web程序时,传统的数据库使用模式按照以下步骤: 在程序中建立数据库连接 进行sql操作 断开数据库连接 但是,这种模式存在着移动的问题: 传统连接模式每次向 ...

  3. Linuxc - 多c文件程序编译执行

    多文件使用,一起编译 定义max.h int max(int a,int b); 定义max.c #include "max.h" int max(int a,int b) { i ...

  4. Linux - ubuntu 16 打开SSH服务

    ubuntu 16 打开SSH服务 1.查看是否启动进程 roott@jiqing-virtual-machine:~# ps -ef | grep sshd root 3477 1 0 18:36 ...

  5. 关于多台机器之前session共享，sessionState mode="StateServer" 问题的困扰

    .net 多台机器共享session是很老的技术,一直很少用到session. 最近就出现了一个问题:三台前端,其中一台保存的session值死活不对,一样的环境,一样的配置文件,就是和另外两台获得的 ...

  6. mysql的水平拆分和垂直拆分

    转:http://www.cnblogs.com/sns007/p/5790838.html 1,水平分割: 例:QQ的登录表.假设QQ的用户有100亿,如果只有一张表,每个用户登录的时候数据库都要从 ...

  7. linux_DNS

    linux其配置文件 : /etc/resolv.conf nameserver 223.5.5.5 nameserver 223.6.6.6 # 这两个解析地址为阿里云解析地址,格式也是这样 什么是 ...

  8. js_9_dom属性

    如何设置标签属性? 找到标签 设置属性: 默认:.属性 = 属性值  //  默认属性才能用 找style中font-size : .style.fontSize     //  中间的短杆去掉,s要 ...

  9. js_1_变量类型

    js中有哪些变量类型? 数字(包括int和float),字符串,数组(字典,js没有字典类型,把字典看成一个对象) 如何把字符转成数字呢? obj.parseInt()         //  转化成 ...

  10. 数据库分表之Mybatis+Mysql实践（含部分关键代码）

    2018年01月31日      随着我们系统用户数量的日增,业务数据处于一个爆发前,增长的数据量已经给我们的系统造成了很大的不确定.在上个周末用户量较多,并发较大的情况下,读写频繁的验证码表,数据量 ...