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> 

  • 相关阅读:
    网络编程--requests模块
    python连接oracle--cx_Oracle模块
    操作excel
    操作mysql数据库
    枚举--enumerate
    邮箱
    匿名函数
    使用spring security jwt 、spring security oauth2权限控制遇到的坑记录
    基于element-ui定义自己的Menu 菜单组件并以component方式去定渲染
    VUE同域情况下父窗体打开子窗口,关闭子窗口时刷新父窗体
  • 原文地址:https://www.cnblogs.com/claireyuancy/p/7190457.html
Copyright © 2011-2022 走看看