<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>Js压缩图片</title>
    <script type="text/javascript" >
        //img：图片对象
        //   w：宽度
        //   h：高度
        function ctlImg(img, w, h) {
            var img_Width = w;
            var img_Height = h;
            var w = img.width;
            var h = img.height;
            if (img.width > img_Width && img.height > img_Height) {
                if (w / img_Width > h / img_Height) {
                    img.width = img_Width;
                    img.height = parseInt(img_Width / w * h);
                }
                else {
                    img.height = img_Height;
                    img.width = parseInt(img_Height / h * w);
                }
                return true;
            }
            if (w > img_Width) {
                img.width = img_Width;
                img.height = parseInt(img_Width * (h / w));
            } else if (h > img_Height) {
                img.height = img_Height;
                img.width = parseInt(img_Height * (w / h));
            }
            return true;
        }
</script>
</head>
<body >
<img alt="" src="1.jpg "  onload="ctlImg(this,80,60)"/>
<img alt="" src="2.jpg "  onload="ctlImg(this,800000,600)"/>
<img alt="" src="3.jpg "  onload="ctlImg(this,80,60)"/>
<img alt="" src="4.jpg "  onload="ctlImg(this,8000,100)"/>

</body>
</html>

通过JS，按照原比例控制图片尺寸的更多相关文章

  1. js 压缩图片（只缩小体积，不更改图片尺寸）

      1.情景展示 如上图所示,点击上传图片按钮,调用手机摄像头拍照功能. <input onchange="javascript:imgFun.uploadPicture();&quo ...

  2. vue中 js获取图片尺寸 设置不同样式

    1.JS: 请求到后端数据后 判断图片尺寸 2.HTML代码 根据设置的类型,给图片添加不同的样式 3.CSS代码 添加不同尺寸的样式

  3. 大屏iPhone的适配 +iOS 图片尺寸要求

    摘自:http://blog.ibireme.com/2014/09/16/adapted_to_iphone6/ 苹果公司官网设计介绍到:Retina显示屏的超高像素密度已超过人眼能分辨的范围.Re ...

  4. angular-file-upload封装为指令+图片尺寸限制

    不了解angular-file-upload基础使用 请先参考http://blog.csdn.net/lai_xu/article/details/49535847 博客地址 下文如果有更好的建议请 ...

  5. ajaxfileupload批量上传文件+图片尺寸限制

    1.首先展示ajaxfileupload代码,在这里修改为批量上传 //ajaxfileupload不展示全部代码,这是修改前与修改后代码对比,目的是上传多个文件 createUploadForm: ...

  6. C#根据屏幕分辨率改变图片尺寸

    最近工作中遇到一个问题,就是需要将程序文件夹中的图片根据此时电脑屏幕的分辨率来重新改变图片尺寸 以下为代码实现过程: 1.获取文件夹中的图片,此文件夹名为exe程序同目录下 //读取文件夹中文件 Di ...

  7. 【js】【图片瀑布流】js瀑布流显示图片20180315

    js实现把图片用瀑布流显示,只需要“jquery-1.11.2.min.js”. js: //瀑布流显示图片 var WaterfallImg = { option: { maxWidth: 850, ...

  8. php canvas 前端JS压缩，获取图片二进制流数据并上传

    <?php if(isset($_GET['upload']) && $_GET['upload'] == 'img'){ //二进制数据流 $data = file_get_c ...

  9. Python读取图片尺寸、图片格式

    Python读取图片尺寸.图片格式 需要用到PIL模块,使用pip安装Pillow.Pillow是从PIL fork过来的Python 图片库. from PIL import Image im = ...

随机推荐

  1. 第5章 选举模式和ZooKeeper的集群安装 5-2 单机伪分布式安装zookeeper集群

    先搭建伪分布式集群,再去搭建真分布式集群.有些的人的电脑内存.性能比较低,所以在搭建真实的一个分布式环境的话,可能会相对来说比较卡,所以两种都会做一下,首先会在单机上搭建一个集群.单机上的集群主要就是 ...

  2. 624. Maximum Distance in Arrays二重数组中的最大差值距离

    ［抄题］: Given m arrays, and each array is sorted in ascending order. Now you can pick up two integers ...

  3. ROS Learning-004 beginner_Tutorials 介绍简单的ROS命令

    ROS Indigo beginner_Tutorials-03 介绍简单的ROS命令 我使用的虚拟机软件:VMware Workstation 11 使用的Ubuntu系统:Ubuntu 14.04 ...

  4. 数字图像处理实验（7）：PROJECT 04-03 ， Lowpass Filtering 标签： 图像处理MATLAB 2017-05-25 09:30 109人

    实验要求: Objective: To observe how the lowpass filtering smoothes an image. Main requirements: Ability ...

  5. 2013年第四届蓝桥杯国赛 九宫重排（HashMap+双BFS优化）

    九宫重排     时间限制:1.0s   内存限制:256.0MB 问题描述 如下面第一个图的九宫格中,放着 1~8 的数字卡片,还有一个格子空着.与空格子相邻的格子中的卡片可以移动到空格中.经过若干 ...

  6. oracle安装和使用问题解决方案

    1.Enter the full pathname for java.exe 要输入的是32位系统的jdk中的java.exe路径,比如  C:\Program Files\Java\jdk1.6.0 ...

  7. 扒一扒spring，dom4j实现模拟实现读取xml

    今天leadr提出需求,原来公司项目中读取解析xml文件的代码效率太低,考虑切换一种xml为数据封装格式与读取方式以提高效率.我这灵机一动spring对bean的依赖注入就是读取xml文件,可以尝试扒 ...

  8. vmware vmware esxi5.x安装方法及解决错误

    vmware Esxi5.x安装指南 vmware Esxi5文档中心官网地址: http://pubs.vmware.com/vsphere-55/index.jsp?topic=%2Fcom.vm ...

  9. 【bzoj3209】: 花神的数论题 数论-DP

    [bzoj3209]: 花神的数论题 首先二进制数中1的个数最多就是64个 设所有<=n的数里二进制中1的个数为i的有a[i]个 那么答案就是  然后快速幂 求a[i]可以用DP 设在二进制中从 ...

  10. 洛谷 P4297 [NOI2006]网络收费

    P4297 [NOI2006]网络收费 题目背景 noi2006 day1t1 题目描述 网络已经成为当今世界不可或缺的一部分.每天都有数以亿计的人使用网络进行学习.科研.娱乐等活动.然而,不可忽视的 ...