js实现图片的等比例缩放

CreateTime--2018年3月6日14:04:18

Author:Marydon

1.代码展示

/**

 * 图片按宽高比例进行自动缩放

 * @param ImgObj

 *     缩放图片源对象

 * @param maxWidth

 *     允许缩放的最大宽度

 * @param maxHeight

 *     允许缩放的最大高度

 * @usage

 *     调用：<img src="图片" onload="javascript:DrawImage(this,100,100)">

 */

function DrawImage(ImgObj, maxWidth, maxHeight){

    var image = new Image();

    //原图片原始地址（用于获取原图片的真实宽高，当<img>标签指定了宽、高时不受影响）

    image.src = ImgObj.src;

    // 用于设定图片的宽度和高度

    var tempWidth;

    var tempHeight;

    if(image.width > 0 && image.height > 0){

        //原图片宽高比例 大于 指定的宽高比例，这就说明了原图片的宽度必然 > 高度

        if (image.width/image.height >= maxWidth/maxHeight) {

            if (image.width > maxWidth) {

                tempWidth = maxWidth;

                // 按原图片的比例进行缩放

                tempHeight = (image.height * maxWidth) / image.width;

            } else {

                // 按原图片的大小进行缩放

                tempWidth = image.width;

                tempHeight = image.height;

            }

        } else {// 原图片的高度必然 > 宽度

            if (image.height > maxHeight) {

                tempHeight = maxHeight;

                // 按原图片的比例进行缩放

                tempWidth = (image.width * maxHeight) / image.height;

            } else {

                // 按原图片的大小进行缩放

                tempWidth = image.width;

                tempHeight = image.height;

            }

        }

        // 设置页面图片的宽和高

        ImgObj.height = tempHeight;

        ImgObj.width = tempWidth;

        // 提示图片的原来大小

        ImgObj.alt = image.width + "×" + image.height;

    }

}

2.测试

<body>

    <h2>原图片</h2>

    <img src="6.png" alt="500x3500"/>

    <h2>按比例缩放后的图片</h2>

    <img src="6.png" onload="javascript:DrawImage(this,145,100)"/>

</body>

3.效果展示

说明：还有一种最简单的方法，就是：给图片只设置宽度或高度，页面加载的时候，浏览器会自动对图片进行等比缩放或放大。

 

js实现图片的等比例缩放的更多相关文章

  1. CSS实现图片快速等比例缩放，效果佳

    初学者在实现图片等比例缩放,通常会使用js编写逻辑来控制高或宽,达到自动缩放的效果. 这里提供一种纯CSS的图片缩放功能,请看代码: <style type="text/css&quo ...

  2. android项目 之 记事本（12） ----- 图片的等比例缩放及给图片加入边框

    本文是自己学习所做笔记.欢迎转载,但请注明出处:http://blog.csdn.net/jesson20121020 在Android的UI开发中常常会遇到图片的缩放,就比方记事本,如今的图片都比較 ...

  3. Qt图片按原比例缩放

    1.选择图片 QString strFilePath = QFileDialog::getOpenFileName(this, tr("Select file"), QStanda ...

  4. java读取jpg图片旋转按比例缩放

    //入口 public static BufferedImage constructHeatWheelView(int pageWidth, int pageHeight, DoubleHolder ...

  5. js 完成对图片的等比例缩放的方法

    /* 重新按比例设置 页面上对应图片的长和高, */ function resetImgSize(id,imgWidth,imgHeight,posWidth,posHeight) { var wid ...

  6. 在vue中通过js动态控制图片按比列缩放

    1.html 通过外层的div来给img对应的class,隐藏的img是得到img图片请求回来时的原始尺寸.外层div是固定大小,因此,图片有两种情况去适应外部div的尺寸.一种是宽度大于高度的情况, ...

  7. PHP对图片按照一定比例缩放并生成图片文件

    list($width, $height)=getimagesize($filename);//缩放比例$per=round(400/$width,3); $n_w=$width*$per;$n_h= ...

  8. jQuery制作图片的等比例缩放

    1资料的排版 2.html代码 <body> <div class="BB"><img src="dw.jpg" alt=&quo ...

  9. iOS 网络/本地 图片 按自定义比例缩放 不失真 方法

    我尝试了很多种方法,终于,设计了一个方法,能按自己规定的大小压缩 还没失真 如果以后不好用 我再升级 分享给大家: + (CGRect )scaleImage:(UIImage *)image toS ...

随机推荐

  1. Flask实战第52天：cms添加轮播图前端代码逻辑完成

    首页我们在模态框中的保存按钮加一个id,这样方便我们选取这个按钮 <button type="button" class="btn btn-primary" ...

  2. linux——(1)初识linux

    linux有窗口管理员环境和纯文本界面环境,同时linux默认提供6个Terminal来让用户登录.crtl+alt+F1-6可自由切换.其中如果窗口管理员环境处于运行状态,那么可以按crtl+alt ...

  3. ASP.NET总结——更改后

    这篇重新整理的总结,我做了很久,也在草稿箱中放了很久,一直感觉没有达到和老师谈话后的水平,感觉还是需要增加一些修改,希望读者能提出宝贵意见.既这篇博客之前,我发表了一篇ASP.net的总结,在结构上, ...

  4. 【UOJ #171】【WC 2016】挑战NPC

    http://uoj.ac/problem/171 带花树开花时的u和v一定要记清楚顺序,想好了再写,数据范围也要算好! 对每个筐子拆成3个点,连成一个三元环,对每个(u,v),让u和v的3个点都连边 ...

  5. [BZOJ4000][TJOI2015]棋盘(状压DP+矩阵快速幂)

    题意极其有毒,注意给的行列都是从0开始的. 状压DP,f[i][S]表示第i行状态为S的方案数,枚举上一行的状态转移.$O(n2^{2m})$ 使用矩阵加速,先构造矩阵a[S1][S2]表示上一行为S ...

  6. 【思维】Stacks of Flapjacks

    [UVa120] Stacks of Flapjacks 算法入门经典第8章8-1 (P236) 题目大意:有一个序列,可以翻转[1,k],构造一种方案使得序列升序排列. 试题分析:从插入排序即可找到 ...

  7. 【数据结构】Not so Mobile (6-9)

    [UVA839]Not so Mobile 算法入门经典第6章6-9(P157) 题目大意:输入一个树状天平,根据力矩相等原则判断是否平衡. 试题分析:貌似没有什么难点…… #include<i ...

  8. BZOJ 3289 Mato的文件管理（莫队+树状数组）

    [题目链接] http://www.lydsy.com/JudgeOnline/problem.php?id=3289 [题目大意] 求静态区间逆序对. [题解] 我们对查询进行莫队操作,对于区间的删 ...

  9. 【点分治】Osipovsky Cup 2014 Kovrov, Sunday, December 21, 2014 Problem A. Attack and Defence

    题意:给你一棵树,每个点有一个左括号或者右括号,问你树上能够完美匹配的路径数量(l->r,r->l 视作不同路径). 点分治可以使用“不扣去重复答案”的写法,只不过,要先将每个点的子树按照 ...

  10. Objective-c nil, Nil, NULL和NSNull的区别

    在OC中可能经常会遇到 nil,Nil,NULL和NSNull,下面分析一下之间的区别: Symbol Value Meaning NULL (void *)0 literal null value ...