zoukankan      html  css  js  c++  java
  • js 控制图片大小核心讲解

    控制图片大小的方法有很多,在本文将为大家详细介绍下使用js实现缩放图片,核心代码如下,感兴趣的朋友可以参考下

    缩放图片脚本分享 
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
    <html> 
    <head> 
    <title>js 控制图片大小-www.jbxue.com</title> 
    <meta name="Generator" content="EditPlus"> 
    <meta name="Author" content=""> 
    <meta name="Keywords" content=""> 
    <meta name="Description" content="">
    <script> 
    function AutoResizeImage(maxWidth,maxHeight){ 
    var objImg = document.getElementById("operImg"); 
    var img = new Image(); 
    img.src = objImg.src; 
    var hRatio; 
    var wRatio; 
    var Ratio = 1; 
    var w = img.width; 
    var h = img.height; 
    wRatio = maxWidth / w; 
    hRatio = maxHeight / h; 
    if (maxWidth ==0 && maxHeight==0){ 
    Ratio = 1; 
    }else if (maxWidth==0){// 
    if (hRatio<1) Ratio = hRatio; 
    }else if (maxHeight==0){ 
    if (wRatio<1) Ratio = wRatio; 
    }else if (wRatio<1 || hRatio<1){ 
    Ratio = (wRatio<=hRatio?wRatio:hRatio); 
    } 
    if (Ratio<1){ 
    w = w * Ratio; 
    h = h * Ratio; 
    } 
    objImg.height = h; 
    objImg.width = w; 
    } 
    </script> 
    
    </head> 
    
    <body> 
    
    <img src="1111.jpg" border="0" alt="534 X 800" id="operImg"/> 
    
    <input type="button" value="缩放至宽100px,等比例压缩" onclick="AutoResizeImage(100,0)"/> 
    
    <input type="button" value="缩放至300px,等比例压缩" onclick="AutoResizeImage(300,0)"/> 
    
    <input type="button" value="原图" onclick="AutoResizeImage(0,0)"/> 
    </body> 
    </html> 

    重点js: 

    function AutoResizeImage(maxWidth,maxHeight){ 
    var objImg = document.getElementById("operImg"); 
    var img = new Image(); 
    img.src = objImg.src; 
    var hRatio; 
    var wRatio; 
    var Ratio = 1; 
    var w = img.width; 
    var h = img.height; 
    wRatio = maxWidth / w; 
    hRatio = maxHeight / h; 
    if (maxWidth ==0 && maxHeight==0){ 
    Ratio = 1; 
    }else if (maxWidth==0){// 
    if (hRatio<1) Ratio = hRatio; 
    }else if (maxHeight==0){ 
    if (wRatio<1) Ratio = wRatio; 
    }else if (wRatio<1 || hRatio<1){ 
    Ratio = (wRatio<=hRatio?wRatio:hRatio); 
    } 
    if (Ratio<1){ 
    w = w * Ratio; 
    h = h * Ratio; 
    } 
    objImg.height = h; 
    objImg.width = w; 
    } 
  • 相关阅读:
    【前端开发】vue子项目打包一个组件供另一个项目使用教程
    【前端开发】基于flow-editor-vue库改造的流程设计器,审批流程引擎前端教程
    【前端开发】基于logicFlow可视化流程库改造的流程引擎教程
    知识蒸馏:Distillation
    浮点神经网络vs二值神经网络
    Representation Learning 表征学习
    mybatis plus 追加where 函数
    20211012 MapStruct
    20211012 Dubbo 的 SPI 和 Adaptive
    20210916 小马哥讲 Spring AOP
  • 原文地址:https://www.cnblogs.com/cfinder010/p/3360461.html
Copyright © 2011-2022 走看看