<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. ActionbarActivity和普通的Activity的区别

    ActionbarActivity用于支持API11以下的程序支持ActionBar的功能,但是需要加入支持库 不这样做的话只有API11以上的才能支持ActionBar

  2. C++面向对象类的实例题目五

    题目描述: 编写一个程序,采用一个类求n!,并输出5!的值. 程序代码: #include<iostream> using namespace std; class CFactorial ...

  3. p4570 [BJWC2011]元素

    传送门 分析 对法力值从大到小排序然后对编号跑线性基即可 代码 #include<iostream> #include<cstdio> #include<cstring& ...

  4. CLRInjection - 通用托管注入（超级灰色按钮克星升级版）

    通用托管注入 - CLRInjection CLR软件系列第二发: 通用托管注入 - CLRInjection 软件简介:这款软件可以将任意托管DLL用插件的形式,注入到正在运行中的.net托管程序集 ...

  5. 数据结构 happiness

    问题描述 这一天是小 V 的生日,他收到了朋友们送给他的礼物.现在,小 V 有 n 件礼物,他将这 n 件礼物排成一排,依次编号为 1 到 n,每件礼物都有一个满意值 w[i].现在小 V 要从中选取 ...

  6. UCOSIII优先级

    优先级 0:中断服务管理任务 OS_IntQTask() 优先级 1:时钟节拍任务        OS_TickTask()   滴答定时器任务 优先级 2:定时任务               OS ...

  7. ubuntu基础知识与技巧

    root用户与超级用户的切换 (1)  sudo -i (2)  sudo su (3)  su root 安装升级 查看软件xxx安装内容 dpkg -L xxx 查找软件库中的软件 apt-cac ...

  8. Arcgis android 10.2安装方法

    请仔细对照博文做!!! 将arcgis android 10.2的压缩包解压 arcgis android 10.2下载地址http://pan.baidu.com/s/1sj2LKO9 Help-& ...

  9. C#中的多线程 - 高级多线程

    1非阻塞同步Permalink 之前,我们描述了即使是很简单的赋值或更新一个字段也需要同步.尽管锁总能满足这个需求,一个存在竞争的锁意味着肯定有线程会被阻塞,就会导致由上下文切换和调度的延迟带来的开销 ...

  10. c#桌面应用程序开发--登陆窗口

    一.显示登陆窗口 应用程序入口点为Main方法,因此在Main方法中创建登陆窗体. 1)创建登陆窗体(登陆窗体UI已提前创建好); 2)显示窗体,以模式对话框的形式显示,并赋值给result; 3)判 ...