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="width: 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

 

　　

　　

posted @ 2018-01-12 16:54  码农沐沐  阅读(305)  评论(0)  编辑  收藏  举报