zoukankan      html  css  js  c++  java
  • 用户上传本地磁盘中的一个图片文件作为头像

    <script type="text/javascript">

          //图片上传预览    IE是用了滤镜。

            function previewImage(file)

            {

              var MAXWIDTH  = 180; 

              var MAXHEIGHT = 180;

              var div = document.getElementById('preview');

              if (file.files && file.files[0])

              {

                  div.innerHTML ='<img id=imghead>';

                  var img = document.getElementById('imghead');

                  img.onload = function(){

                    var rect = clacImgZoomParam(MAXWIDTH, MAXHEIGHT, img.offsetWidth, img.offsetHeight);

                    img.width  =  rect.width;

                    img.height =  rect.height;

    //                 img.style.marginLeft = rect.left+'px';

                    img.style.marginTop = rect.top+'px';

                  }

                  var reader = new FileReader();

                  reader.onload = function(evt){img.src = evt.target.result;}

                  reader.readAsDataURL(file.files[0]);

              }

              else //兼容IE

              {

                var sFilter='filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale,src="';

                file.select();

                var src = document.selection.createRange().text;

                div.innerHTML = '<img id=imghead>';

                var img = document.getElementById('imghead');

                img.filters.item('DXImageTransform.Microsoft.AlphaImageLoader').src = src;

                var rect = clacImgZoomParam(MAXWIDTH, MAXHEIGHT, img.offsetWidth, img.offsetHeight);

                status =('rect:'+rect.top+','+rect.left+','+rect.width+','+rect.height);

                div.innerHTML = "<div id=divhead style='"+rect.width+"px;height:"+rect.height+"px;margin-top:"+rect.top+"px;"+sFilter+src+""'></div>";

              }

            }

            function clacImgZoomParam( maxWidth, maxHeight, width, height ){

                var param = {top:0, left:0, width, height:height};

                if( width>maxWidth || height>maxHeight )

                {

                    rateWidth = width / maxWidth;

                    rateHeight = height / maxHeight;

                    

                    if( rateWidth > rateHeight )

                    {

                        param.width =  maxWidth;

                        param.height = Math.round(height / rateWidth);

                    }else

                    {

                        param.width = Math.round(width / rateHeight);

                        param.height = maxHeight;

                    }

                }

                

                param.left = Math.round((maxWidth - param.width) / 2);

                param.top = Math.round((maxHeight - param.height) / 2);

                return param;

            }

    </script> 

  • 相关阅读:
    hibernate 使用hibernate 的注解做多对一双向映射
    JBPM学习笔记
    在测试Hibernate的一对多双向关联映射时
    js定时三秒后自动跳转页面
    struts2 的验证框架
    hibernate 双向一多对关联 删除一端时级联删除多端
    JPA 一些常用的东西
    Python 基础语法
    设计一个带有getmin功能的栈,保证时间复杂度在O(1)
    数据结构栈模拟队列
  • 原文地址:https://www.cnblogs.com/claireyuancy/p/7190457.html
Copyright © 2011-2022 走看看