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

<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. solr单机版安装与基本部署

    安装solr准备工作: linux/tomcat/jdk solr单机版的安装 1.解压缩tomcat安装包 tar -zxf tomcat-xxx.tar.gz 2.创建文件夹:mkdir /usr ...

  2. JavaSE笔记-异常

    Java 异常 Throwable类的体系结构(一些常用的) 异常分类 checked,unchecked 区分:RuntimeException及其子类,Error类及其子类,是unchecked ...

  3. OpenCV3.0 HDR（高动态范围）示例代码以及用法

    OpenCV 3.0以及以后版本集成了HDR算法,样例代码的路径为: .\sources\samples\cpp\tutorial_code\photo\hdr_imaging.cpp. 实现算法的参 ...

  4. bootstrap简单图文环绕效果

    一．      下载bootstrap-3.3.7 二．      在html页面引入css,js; eg: <link src="bootstrap-3.3.7-dist/css/b ...

  5. 百度Apollo 尝试

    从Git-Hub上下载了Apollo源码在Ubuntu上准备运行一下 完成了以下步骤: bash docker/scripts/install_docker.sh bash docker/script ...

  6. Asp.net core 2.0.1 Razor 的使用学习笔记（一）

    环境:vs2017 版本:15.5.6 一.新建项目 1.文件>新建>项目>Visual c#>.NET Core>ASP.NET Core Web应用程序(“.NET ...

  7. docker搭建私服

    拉registry镜像 假设在192.168.100.17服务器上搭建私服 docker pull registry docker run -d -v /data/docker/registry:/v ...

  8. springMVC中使用POI方式导出excel至客户端、服务器实例

    Apache POI是Apache软件基金会的开放源码函式库,POI提供API给Java程序对Microsoft Office格式档案读和写的功能. 这里的方法支持导出excel至项目所在服务器,或导 ...

  9. maven(项目管理工具系列 maven 总结二)

    ♣maven是什么? ♣maven下载.安装 ♣了解maven仓库 ♣eclipse配置maven ♣创建maven项目 ♣把maven项目转化为web项目 1.maven是什么? Maven是一个项 ...

  10. JS中的算法与数据结构——排序（Sort）(转)

    排序算法(Sort) 引言 我们平时对计算机中存储的数据执行的两种最常见的操作就是排序和查找,对于计算机的排序和查找的研究,自计算机诞生以来就没有停止过.如今又是大数据,云计算的时代,对数据的排序和查 ...