js同比例缩放图片的小例子_javascript技巧

复制代码 代码如下:

function DrawImage(ImgD, FitWidth, FitHeight) {
    var image = new Image();
    image.src = ImgD.src;
    if (image.width > 0 && image.height > 0) {
        if (image.width / image.height >= FitWidth / FitHeight) {
            if (image.width > FitWidth) {
                ImgD.width = FitWidth;
                ImgD.height = (image.height * FitWidth) / image.width;
            } else {
                ImgD.width = image.width;
                ImgD.height = image.height;
            }
        } else {
            if (image.height > FitHeight) {
                ImgD.height = FitHeight;
                ImgD.width = (image.width * FitHeight) / image.height;
            } else {
                ImgD.width = image.width;
                ImgD.height = image.height;
            }
        }
    }
}

时间: 2025-01-02 08:12:01

js同比例缩放图片的小例子_javascript技巧的相关文章

JS等比例缩小图片尺寸的实例_javascript技巧

为了提升用户体验,网站用户在上传图片的时候,我们不能够让用户自己去处理图片以达到我们的要求. 而通常像淘宝上商品实物展示这样的页面,我们需要控制的主要是图片的宽度. 又考虑到html页面解析顺序可能导致的一些问题,决定通过定义一个简单的功能函数,然后在img元素中添加onload事件来调用的方式进行实现,代码如下: JS部分 复制代码 代码如下: <script type="text/javascript"> function changeImg(objImg) {    

js实现广告漂浮效果的小例子_javascript技巧

复制代码 代码如下: <html><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title></title><style type="text/css">div{position:absolute;}</style></head><body

js给dropdownlist添加选项的小例子_javascript技巧

复制代码 代码如下:   <input name="" type="text"  id="newDirtxt"/> <input class="btn" name="" type="button" value="创建新目录"  onclick="newDir()" />   ?<BR><BR><

js日期时间补零的小例子_javascript技巧

复制代码 代码如下: function getNowFormatDate()         {            var day = new Date();            var Year = 0;            var Month = 0;            var Day = 0;            var CurrentDate = "";            //初始化时间            //Year       = day.getYea

js 实现日期灵活格式化的小例子_javascript技巧

复制代码 代码如下: /**  * 时间对象的格式化;  */ Date.prototype.format = function(format) {      /*      * eg:format="YYYY-MM-dd hh:mm:ss";      */     var o = {          "M+" :this.getMonth() + 1, // month          "d+" :this.getDate(), // d

JS实现点击下载的小例子_javascript技巧

复制代码 代码如下: <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <a   href="a.txt"   id=pic1   onclick="savepic();return false;"   style="cursor:hand">点击下载</a>           

JQuery实现等比例缩放图片大小的例子

1.己知图片高度与宽度 当页面加载的图片中含有属性width和height值,则可以使用几句简单的jQuery代码实现等比例缩放,也可以通过JQ内置函数来获图片取宽高.    代码如下 复制代码 $(function(){        var w = $("#demo1").width();//容器宽度        $("#demo1 img").each(function(){//如果有很多图片,可以JQ内置的each()遍历            var i

Ajax清除浏览器js、css、图片缓存的方法_javascript技巧

做东东时都是把图片在服务器的地址存放在数据库里面,然后到浏览器中显示,但是后来发现了两个问题. 第一:为了安全起见,js是无法读取本地的图片的,不然你写一个js,岂不是可以获取任何人电脑里面的文件了. 第二:图片存在的是在服务器的硬盘上面,而不是在客户的硬盘里面,所以也是取不到的 后来在网上找方法,找的方法,都是各种转换二进制到xml中,的各种高大上的答案,然后本人又实在太懒了,就自己想了一个 方法,就是利用BufferedImage这个类. 开始 首先说说我的思路,就是把本地的图片,加载到内存

JS实现的车标图片提示效果代码_javascript技巧

本文实例讲述了JS实现的车标图片提示效果.分享给大家供大家参考.具体如下: 这是一款基于JavaScript的鼠标提示效果,名车车标展示提示效果-鼠标移过时显示车标图片,页面打开后并不显示车标,只有当鼠标移在车标上的时候,车标才突然出现,类似Js提示特效,本代码兼容性也写的不错,代码也并不复杂,大部分是调用图片的. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-car-ico-alert-style-demo/ 具体代码如下: <!DOC