• js 裁剪头像 手机 、PC


    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <link href="/templates/facaiyu/css/index.css" rel="stylesheet" type="text/css" />
    <head>
        <title></title>
    
    </head>
    <div style="height: 2.5em;">
        <a href="#" class="a_album_esc">
            <img class="album_esc" src="/img/dzp_esc.png" /></a></div>
    <body ontouchstart="">
        <div id="clipArea">
        </div>
        <input type="file" class="but" style="display: none" id="file">
        <div style=" 70%; margin-left: auto; margin-right: auto;">
            <b id="btnfile" class="but" style="margin: 20px;">选择文件</b>
             <b id="clipBtn" class="but"
                style="margin: 20px;">确定裁剪</b>
        </div>
        <div id="view" style="display: none">
        </div>
        <script src="js/jquery-2.1.4.js" type="text/javascript"></script>
    
        <script src="/js/photoclip/iscroll-zoom.js"></script>
        <script src="/js/photoclip/hammer.min.js"></script>
        <script src="/js/photoclip/lrz.all.bundle.js"></script>
        <script src="/js/photoclip/PhotoClip.js"></script>
        <script>
            $(function ()
            {
                $(".a_album_esc").click(function ()
                {
                    var index = parent.layer.getFrameIndex(window.name); //获取窗口索引
                    parent.layer.close(index);
    
                });
                $("#btnfile").click(function ()
                {
                    $("#file").click();
                });
            });
    
            var pc = new PhotoClip('#clipArea', {
                size: [260, 260],
                outputSize: [60, 60],
                //adaptive: ['100%', '50%'],
                file: '#file',
                view: '#view',
                ok: '#clipBtn',
                //img: 'img/mm.jpg',
                outputQuality: 1,
                loadStart: function ()
                {
                    console.log('开始读取照片');
                },
                loadComplete: function ()
                {
                    console.log('照片读取完成');
                },
                done: function (dataURL)
                {
                    imageurlup(dataURL);
                },
                fail: function (msg)
                {
                    alert(msg);
                }
            });
    
            // 加载的图片必须要与本程序同源,否则无法截图
            //pc.load('img/mm.jpg');
    
            function imageurlup(dataURL)
            {
    
                var arr = { "action": "sys_base64imgIcon", "imagedata": dataURL };
                var datajson = getDataJosn2(arr, "/Api/usersHandler.ashx");
    
                datajson = JSON.parse(datajson);
                if (datajson.succeed != "000")
                {
                    layer.msg(datajson.sucInfo, { time: 1000 });
                    return;
                }
                if (datajson.succeed == "000")
                {
                    setAvatar(datajson.imgurl);
                }
            }
        </script>
    </body>
    </html>



      #region 裁剪头像
    
            #region 生成图片路径====
            public string sys_base64imgIcon(HttpContext context)
            {
                string imgurl = "";
                if (Falcon.Function.GetFormString("imagedata") != "")
                {
                    imgurl = sys_base64img(context);
                    return "{"succeed":"000","sucInfo":"上传图片数据成功","imgurl":"" + imgurl + ""}";
    
                }
                else
                {
                    return "{"succeed":"001","sucInfo":"上传图片数据不能为空"}";
    
                }
            }
            #endregion
            private string sys_base64img(HttpContext context)
            {
                string base64Data = Falcon.Function.GetFormString("imagedata");
                string requestStrValue = base64Data.Substring(base64Data.IndexOf(',') + 1);//代表 图片 的base64编码数据
                Encoding encoding = Encoding.UTF8;//设置编码格式
                byte[] imageBytes = Convert.FromBase64String(requestStrValue);
                UpLoad upcongig = new UpLoad();
                string newFileName = Utils.GetRamCode() + ".png"; //随机生成新的文件名
                string upLoadPath = upcongig.GetUpLoadPath(); //上传目录相对路径
                string fullUpLoadPath = Utils.GetMapPath(upLoadPath); //上传目录的物理路径
                string newFilePath = upLoadPath + newFileName; //上传后的路径
                //检查上传的物理路径是否存在,不存在则创建
                if (!Directory.Exists(fullUpLoadPath))
                {
                    Directory.CreateDirectory(fullUpLoadPath);
                }
                MemoryStream ms = new MemoryStream(imageBytes);
                Image img = Image.FromStream(ms);
                Thumbnail.MakeThumbnailImage(img, fullUpLoadPath + newFileName, 1000, 1000);
                CuTImg.GenerateHighThumbnail(fullUpLoadPath + newFileName, fullUpLoadPath + "thumb_" + newFileName, 60, 60);
                Utils.DeleteUpFile(upLoadPath + newFileName);
              
                return upLoadPath + "thumb_" + newFileName;
    
            }
    
    
            #endregion

      

      

    永远也不要消极地认为做什么事是不可能的,只要你认 为你能, 尝试, 尝试, 再尝试, 最终你都发现你能。
  • 相关阅读:
    git 常用命令大全
    iOS UITextView placeHolder占位文字的N种方法实现方法
    ios自定义日期、时间、城市选择器
    zabbix-agent 自定义key
    linux过滤文本
    mysql修改默认存储目录
    git私库搭建
    vmdk,qcow2导入proxmox
    centos字符集问题
    ipset使用
  • 原文地址:https://www.cnblogs.com/zhangmu/p/8276681.html
Copyright © 2020-2023  润新知