Javascript实现上传的图片按比例缩放和原样显示

javascript|上传|显示

  我们经常会遇到在页面中的图片按照我们自己的大小来显示,这样可以让页面看起来更规范一些。    比如我们要在页面种显示130×160的图片,相当于我们将图片放入这样的一个相框那,超过的就缩放到这个框的大小,小的就原样显示。      我们这里有2种解决办法,
    1,不按照比例的缩放  <script language="javascript">
function changeImg(mypic){
    var xw=130;
    var xl=160;

    var width = mypic.width;
    var height = mypic.height;
                    
    if (width > xw ) mypic.width = xw;
    if (height > xl ) mypic.height = xl;
}
</script>
<img src="sh180.jpg" onload="changeImg(this)">      2,按照比例的缩放  <script language="javascript">
function changeImg1(mypic){
    var xw=160;
    var xl=180;
        
    var width = mypic.width;
    var height = mypic.height;
    var bili = width/height;        
        
    var A=xw/width;
    var B=xl/height;
        
    if(A>1||B>1)
    {
        if(A<B)
        {
            mypic.width=xw;
            mypic.height=xw/bili;
        }
        if(A>B)
        {
            mypic.width=xl*bili;
            mypic.height=xl;
        }
    }
}
</script>
<img src="sh180.jpg" onload="changeImg(this)">

时间: 2024-08-25 15:24:21

Javascript实现上传的图片按比例缩放和原样显示的相关文章

JavaScript头像上传插件源码分享_javascript技巧

本文实例为大家分享了JavaScript头像上传插件源码,供大家参考,具体内容如下 效果图: 源码: cxc.js       /* cxc.js 频繁操作公共接口 */ var $ = function (id) { return document.getElementById(id); }; //通过id获取dom对象 var A = function (msg) { alert(msg); }; //alert的简写 var EmptyFun = function () { }; // 空

[转]文件上传及图片水印

阿皮休闲 --午夜未睡 from  :http://ptt.hit.edu.cn/api/html/33.html 文件上传及图片水印 来自:fengbo@ 阿皮休闲 日期:2007-5-25 9:01:37 全文阅读:44 分类:.NET学习及应用 [摘要]1.最简单的单文件上传(没花头) 2.多文件上传 3.客户端检查上传文件类型(以上传图片为例) 4.服务器端检查上传文件类型(以上传图片为例) 5.服务器端检查上传文件类型(可以检测真正文件名) 6.上传文件文件名唯一性处理(时间戳+Ses

如何用javascript控制上传文件的大小?

javascript|控制|上传 如何用javascript控制上传文件的大小? --------本文讲的是用javascript和在IE下Image的一些属性如(fileSize,fileUpdatedDate)等控制上传文件的大小.   <form   name=Myform  >     <input   type=file   name=photo><br/>     <input   type=submit   value=submit></

iframe里上传的图片地址自动写到文本框input里无显示

问题描述 内容页<inputname="banner"type="text"id="banner"size="40"><iframesrc="upload.asp"name=headwidth=370marginwidth=0height=21marginheight=0scrolling=noframeborder=0class="red"framespacing=0

jquery.form.js异步上传完图片在post表单为啥post不了

问题描述 jquery.form.js异步上传完图片在post表单为啥post不了 下面是一个post表单 @using (Ajax.BeginForm("AddNewsInfoModel", "AdminNewsList", new AjaxOptions() { HttpMethod = "post", OnSuccess = "afterAdd" }, new { id = "Form1" })) {

为什么在“浏览”选项用上传的图片就不可以了,网页(包括原来输入的文字)

问题描述 为什么用系统中的图片可以更换头像,可是在"浏览"选项用上传的图片就不可以了,网页(包括原来输入的文字)全部变为?,网页上全是?,上传的图片也不会改变<!--#includefile="conn.asp"--><!--#includefile="../inc/function.asp"--><!--#includefile="../inc/cls_user.asp"--><%d

JavaScript实现网页图片等比例缩放实现代码及调用方式_javascript技巧

在处理网页图片时,特别是一些图片列表的应用里面,很难保证图片统一大小,直接设置图片大小又会导致图片拉伸,造成图片模糊,本文介绍的代码可以在图片加载完成后自动按比例调整图片大小. Javascript: 复制代码 代码如下: < script language="javascript" type="text/javascript"> < !-- // 说明:用 JavaScript 实现网页图片等比例缩放 // 整理:http://www.CodeB

请高手看下,下面红色的动态Input上传的图片怎么没有赋值给PIC3

问题描述 请高手看下,下面红色的动态Input上传的图片怎么没有赋值给PIC3.上传图片将地址和文件名给PIC3,然后从数据库中取出并显示.当提交保存的时候,一直是数据库中旧的值.不知道问题出在哪儿?是不是循环中的动态input有问题?谢谢!<%dimpaixuifrs.EOFandrs.BOFthenresponse.Write"<divalign=center><fontcolor=red>还没有分类</font></center>&qu

Swift 2.0图片上传以及图片客户端压缩代码

Swift 2.0图片上传以及图片客户端压缩是写某一个app中,抽离的,其实比较简单,也没有做很多的IOS内部机制判断,只是实现了图片上传以及图片压缩后上传的功能. // //  ViewController.swift //  uploadImage // //  Created by jincon on 15/11/1. //  Copyright 2015年 jincon. All rights reserved. // import UIKit class ViewController: