在Web上显示图片,通常都会有图片显示比例问题,如果不给<img />限制width和height,那么如果图片大了就会将整个页面挤乱,图片小了又会使图片失真。
    我的需求如下:
        1、预先定义好图片显示的标准宽度和高度。
        2、如果图片的大小超过了标准定义,那么等比例压缩图片。
        3、如果图片的大小等于标准定义,那么按照标准宽度和高度显示图片。
        4、如果图片的大小小于标准定义,那么不对图片进行任何压缩处理。
    可能是我搜索的关键字不对吧,在网上找了很长时间,才找到,感觉很好使。代码如下

<script language="JavaScript">
<!--
//图片按比例缩放
var flag=false;
function DrawImage(ImgD,iwidth,iheight){
    //参数(图片,允许的宽度,允许的高度)
    var image=new Image();
    image.src=ImgD.src;
    if(image.width>0 && image.height>0){
    flag=true;
    if(image.width/image.height>= iwidth/iheight){
        if(image.width>iwidth){  
        ImgD.width=iwidth;
        ImgD.height=(image.height*iwidth)/image.width;
        }else{
        ImgD.width=image.width;  
        ImgD.height=image.height;
        }
        ImgD.alt=image.width+"×"+image.height;
        }
    else{
        if(image.height>iheight){  
        ImgD.height=iheight;
        ImgD.width=(image.width*iheight)/image.height;        
        }else{
        ImgD.width=image.width;  
        ImgD.height=image.height;
        }
        ImgD.alt=image.width+"×"+image.height;
        }
    }

//-->
</script>
调用:<img src="data:images/toplogo.gif" onload="javascript:DrawImage(this,100,100)">

转载于:https://www.cnblogs.com/kingeric/archive/2007/01/01/609476.html

JavaScript,等比例缩放图片的函数,很好用。相关推荐

  1. JAVASCRIPT 等比例缩放图片 限定最大宽度和最大高度

    在Web上显示图片,通常都会有图片显示比例问题,如果不给<img />限制width和height,那么如果图片大了就会将整个页面挤乱,图片小了又会使图片失真. 1.预先定义好图片显示的标 ...

  2. javascript等比例缩放图片的实现代码

    <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <meta name ...

  3. python 等比例缩放图片 自写

    Python等比例缩放图片 使用了 OpenCV 进行图片的读取 输入:利用 cv2.imread 函数读取的 Mat 矩阵 输出:缩放后的 Mat 矩阵(示例代码为缩放到 512x512 大小,也可 ...

  4. Python Opencv等比例缩放图片

    Python Opencv等比例缩放图片 前言 前提条件 相关介绍 实验环境 等比例缩放图片 代码实现 输出结果 前言 本文是个人使用Python Opencv处理图片的笔记,由于水平有限,难免出现错 ...

  5. python调整屏幕缩放比例_python实现批量按比例缩放图片效果

    本文实例为大家分享了python实现批量按比例缩放图片的具体代码,供大家参考,具体内容如下 把脚本文件放在要缩放的文件夹下面. 双击运行脚本,输入要缩放的系数.脚本会在当前目录下创建一个scaledI ...

  6. [原创] 图片操作的类(ImageLibrary)-按比例缩放图片

    [原创] 图片操作的类(ImageLibrary)-按比例缩放图片 http://www.vjsdn.com/bbs/bbsTopicDetails.aspx?pid=241 转载于:https:// ...

  7. java实现按比例缩放图片技巧

    java实现按比例缩放图片技巧 案例需求: 根据指定的文件名称,用户给定的缩放比例来完成缩放图片 思路分析: 1.文件对象File 2.BufferedImage构造器: 图像数据的访问的缓冲器 3. ...

  8. Java 等比例缩放图片

    /*** 等比率缩放* @param imgsrc 原图片路径* @param imgdist 缩放图片路径* @param widthdist 指定缩放宽度*/ public static void ...

  9. 等比例缩放图片并填充图片为正方形(python附代码)

    等比例缩放图片并填充图片为正方形 看实现的效果 代码 看实现的效果 之前的 836x662 之后的 300x300 且图片中的塔克斯居中 代码 import os import cv2 import ...

最新文章

  1. IO流(二)转换流、序列化、commons-IO框架
  2. 修改系统tabbar的高度
  3. SQL Server调优系列进阶篇(如何维护数据库索引)
  4. 有关css和js针对不同浏览器兼容的问题
  5. 思路拓展,如果是用2D的方式去做切割
  6. ARM版本的IAR下载和安装
  7. tableau可视化数据分析60讲(二十一)-tableau预测及趋势线
  8. go语言基础到提高(13)-同步
  9. 移动app测试流程与测试点
  10. SecureCRTPortable - 破解
  11. 第三十二期:如何摆脱「技术思维」的惯性?
  12. Android 识别图片二维码
  13. 第二部分Calendar原理和思想
  14. Python笔记-获取某贴吧页面所有的贴吧id
  15. 计算正方形面积和周长_小学三年级数学下册长方形和正方形面积计算练习题(无答案)...
  16. 一文为你详解Unique SQL原理和应用
  17. 鸿蒙系统联合,跨界联合 华为鸿蒙系统赋能厨电业
  18. C 语言:春节回家聚会,只有我没带对象!
  19. matlab实现偏微分方程数值解
  20. 110报警声+单片机c语言,单片机实现消防车报警声音的设计

热门文章

  1. Hive是如何让MapReduce实现SQL操作的?
  2. LeetCode 803. 打砖块(并查集)
  3. LeetCode 1053. 交换一次的先前排列
  4. LeetCode 303. 区域和检索 - 数组不可变(前缀和)
  5. LeetCode 821. 字符的最短距离
  6. 数据结构--二叉查找树 Binary Search Tree
  7. Python面试常用二十题总结
  8. Matplotlib - 柱状图、直方图、条形图 bar() barh() 所有用法详解
  9. 单反录像按钮在哪_单反与微单到底哪不同
  10. 可以闭眼入的O'REILLY机器学习神书出新版了!