<!DOCTYPE html>

<html>

	<head>

		<meta charset="UTF-8">

		<title></title>

		<style type="text/css">

			img{

				max-width: 400px;

			}

			.select{

			}

		</style>

	</head>

	<body>

		<div class="head_img pr">

            <em class="pa"></em>  

            <div class="select">

            	选择压缩的文件<input id="photo" type="file" accept="image/*" />

            </div>

            <a href="" download="" id="down">

            	<img src='' alt="" class="modify_img" />

            </a>

        </div>

	</body>

	<script type="text/javascript" src="js/jquery.js"></script>

	<script type="text/javascript">

		$('#photo').change(function(){

                var _this = $(this)[0],

                    _file = _this.files[0],

                    fileType = _file.type;

                    console.log(_file.size);

                if(/image\/\w+/.test(fileType)){  

                    var fileReader = new FileReader();

                    fileReader.readAsDataURL(_file);

                    fileReader.onload = function(event){

                        var result = event.target.result;   //返回的dataURL

                        var image = new Image();

                        image.src = result;

                        image.onload = function(){  //创建一个image对象，给canvas绘制使用

                            var cvs = document.createElement('canvas');

                            var scale = 0.8;

                            if(this.width > 1000 || this.height > 1000){  //1000只是示例，可以根据具体的要求去设定

                                if(this.width > this.height){

                                    scale = 1000 / this.width;

                                }else{

                                    scale = 1000 / this.height;

                                }

                            }

                            cvs.width = this.width*scale;

                            cvs.height = this.height*scale;     //计算等比缩小后图片宽高

                            var ctx = cvs.getContext('2d');

                            ctx.drawImage(this, 0, 0, cvs.width, cvs.height);

                            var newImageData = cvs.toDataURL(fileType, 0.8);   //重新生成图片，<span style="font-family: Arial, Helvetica, sans-serif;">fileType为用户选择的图片类型</span>

                            var sendData = newImageData.replace("data:"+fileType+";base64,",'');

                           	$('.modify_img').attr('src',newImageData);

                            $("#down").attr("href",newImageData);

                        }  

                    }

                }else{

                    $.notify.show('请选择图片格式文件', {placement: 'center'});

                }

            });

	</script>

</html>

　　

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

  1. 使用ajax上传图片，支持图片即时浏览，支持js图片压缩后上传给服务器

    使用ajax上传图片,支持图片即时浏览,支持js图片压缩后上传给服务器 ajax上传主要使用了 var reader = new FileReader() 此方法 js图片压缩主要是利用canvas进 ...

  2. Angular里使用(image-compressor.js)图片压缩

    参考资料: http://www.imooc.com/article/40038 https://github.com/xkeshi/image-compressor 示例代码: <nz-upl ...

  3. js图片压缩和上传并显示

    由于近期项目中需要做个图片压缩上传,所以就在网上找了些资料自己写了一个 html部分 <input id="file" type="file"> & ...

  4. js 图片压缩上传（base64位）以及上传类型分类

    一.input file上传类型 1.指明只需要图片 <input type="file" accept='image/*'> 2.指明需要多张图片 <input ...

  5. js图片压缩+ajax上传

    图片压缩用到了localresizeimg 地址: https://github.com/think2011/localResizeIMG 用起来比较简单 <input type="f ...

  6. JS—图片压缩上传（单张）

    *vue+webpack环境,这里的that指到vue实例 <input type="file" name="file" accept="ima ...

  7. 无组件客户端js图片压缩

    <div class="free-upload"> <p>上传您的约会照片,一张合影.一张票据哦!</p> <div class=&quo ...

  8. js 图片压缩上传(纯js的质量压缩，非长宽压缩)

    下面是大神整理的demo,很实用,这里存一下备用,感谢大神! 此demo为大于1M对图片进行压缩上传 若小于1M则原图上传,可以根据自己实际需求更改. demo源码如下 <!DOCTYPE ht ...

  9. js图片压缩上传

    最近公司的移动产品相约app要做一次活动,涉及到图片上传,图片又不能太大,不然用户体验太差,必须先压缩再上传,所以用到了html5的canvas和FileReader,代码先上,小弟前端经验不足,代码 ...

随机推荐

  1. Quartz任务调度实践

    最近在写一个任务调度程序,需要每隔几秒查询数据库,并取出数据做一些处理操作.使用到了Quartz任务调度框架. 基本概念 Quartz包含几个重要的对象,分别为任务(Job),触发器(Trigger) ...

  2. Flask web开发之路十

    首先介绍循环引用的问题: 当一个模块需要引用另一个模块的类,而另一个模块又需要引用这个模块的类时,就出现了循环引用,而没法导入类,这时候可以切断其中一条引用路径,增加一个模块 项目结构: models ...

  3. 线段树||BZOJ5194: [Usaco2018 Feb]Snow Boots||Luogu P4269 [USACO18FEB]Snow Boots G

    题面:P4269 [USACO18FEB]Snow Boots G 题解: 把所有砖和靴子排序,然后依次处理每一双靴子,把深度小于等于它的砖块都扔线段树里,问题就转化成了求线段树已有的砖块中最大的砖块 ...

  4. AtCoder Beginner Contest 070|Elena|8.12|#471

    打了场beginner的AtCoder,也是我第一次打AtCoder,虽然AK了,但是由于手速慢+撒比,才#471… 比赛链接:https://beta.atcoder.jp/contests/abc ...

  5. djiango web 在进入admin的时候出现'set' object is not reversible错误

    解决方案是在你的urls.py 中 把{ } 改为[] 原因不详 治标不治本,并不能改的东西

  6. c语言之要点-泛篇

    1.goto goto由goto和标签名组成, 1 1 if(....) 2 2 { 3 3 ..... 4 4 goto part2; 5 5 } 6 6 part2: printf(". ...

  7. 在Ubuntu环境下安装eclipse

    Eclipse运行需要Java环境,java环境的安装见https://www.cnblogs.com/Sabre/p/10349320.html,本文不再赘述. 1.下载eclipse eclips ...

  8. Hive中的窗口函数

    简介 本文主要介绍hive中的窗口函数.hive中的窗口函数和sql中的窗口函数相类似,都是用来做一些数据分析类的工作,一般用于olap分析 概念 我们都知道在sql中有一类函数叫做聚合函数,例如su ...

  9. ArcGIS拓扑检查

    对于拓扑检查中的等级参数一直不理解,经过参考资料才明白过来: 注:如果有两个要素参与到拓扑,在修复拓扑错误时会优先移动拓扑级别低的要素来满足匹配拓扑规则要求. 参考资料: https://wenku. ...

  10. 分布式锁 AP需求 CP需求

    小结: 1. 2019给Java程序员的唯一1条建议 https://mp.weixin.qq.com/s/dpx4GsGgZ0xtvzKd5riJng