zoukankan      html  css  js  c++  java
  • 上传图片,裁剪图片,图片变圆形

    裁剪图片及上传图片:

    <!doctype html>
    <html lang="zh-CN" id="index">
    <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no, minimal-ui" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="format-detection" content="telephone=no, email=no" />
    <meta name="keywords" content="">
    <meta name="description" content="">
    <title>图片裁剪</title>
    <style>
    body {
        margin: 0;
        text-align: center;
    }
    #clipArea {
        margin: 20px;
        height: 300px;
    }
    #file,
    #clipBtn {
        margin: 20px;
    }
    #view {
        margin: 0 auto;
        width: 200px;
        height: 200px;
    }
    </style>
    </head>
    <body ontouchstart="">
    <div id="clipArea"></div>
    <button id="fileBtn" class="btn btn-default" onclick="ClickFile()" >选择宝宝图片</button>
    <input type="file" id="file" accept="image/*" style="display: none;" >
    <button id="clipBtn" class="btn btn-default" >确定</button>
    <!-- <div id="view"></div>-->
    <link href="css/bootstrap.min.css" rel="stylesheet" type="text/css" />
    <script src="js/jquery/2.1.1/jquery.min.js"></script>
        <script type="text/javascript" src="js/bootstrap.min.js"></script>
    <script src="js/iscroll-zoom.js"></script>
    <script src="js/hammer.js"></script>
    <script src="js/lrz.all.bundle.js"></script>
    <script src="js/jquery.photoClip.js"></script>
    <script>
    //document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);
    var clipArea = new bjj.PhotoClip("#clipArea", {
        size: [260, 260],//宽度,高度
        outputSize: [640, 640],
        file: "#file",
        //view: "#view",
        ok: "#clipBtn",
        loadStart: function() {
            console.log("照片读取中");
        },
        loadComplete: function() {
            console.log("照片读取完成");
        },
        clipFinish: function(dataURL) {
            
            var url="https://apidevelop.yla520.com/api/External/Base64ToImgFile";
            
            var obj={Base64:dataURL,Sex:1};
    
            //contentType:"application/json",
            
        $.ajax({  
                url: url,  
                type: "POST",  
                data: {strJson:JSON.stringify(obj)},  
                success: function (data) {
                    location.href=  data;
                    //window.open(data);
                }
            }); 
            
            console.log(dataURL);
            //alert(dataURL);
            //console.log(dataURL);
            console.log("照片读取完成");
            //window.open(url);
        }
    });
    
    function ClickFile()
    {
        $("#file").click();
    }
    
    
     //下载图片
          function download(base64Str) {
            let imgData = base64Str;
            this.downloadFile('测试.png', imgData);
          }
    
    
          //下载
          function downloadFile(fileName, content) {
            let aLink = document.createElement('a');
            let blob = this.base64ToBlob(content); //new Blob([content]);
    
            let evt = document.createEvent("HTMLEvents");
            evt.initEvent("click", true, true);//initEvent 不加后两个参数在FF下会报错  事件类型,是否冒泡,是否阻止浏览器的默认行为
            aLink.download = fileName;
            aLink.href = URL.createObjectURL(blob);
            console.log(aLink.href);
            // aLink.dispatchEvent(evt);
            //aLink.click()
            aLink.dispatchEvent(new MouseEvent('click', {bubbles: true, cancelable: true, view: window}));//兼容火狐
          }
    
    
          //base64转blob
          function base64ToBlob(code) {
            let parts = code.split(';base64,');
            let contentType = parts[0].split(':')[1];
            let raw = window.atob(parts[1]);
            let rawLength = raw.length;
    
            let uInt8Array = new Uint8Array(rawLength);
    
            for (let i = 0; i < rawLength; ++i) {
              uInt8Array[i] = raw.charCodeAt(i);
            }
            return new Blob([uInt8Array], {type: contentType});
          }
    
    
    //clipArea.destroy();
    </script>
    </body>
    </html>

    接收并处理图片:

    [HttpPost("Base64ToImgFile")]
            public IActionResult Base64ToImgFile([FromForm]string strJson)
            {
    
                dynamic m= Newtonsoft.Json.JsonConvert.DeserializeObject<dynamic>(strJson);
                string Base64 = m.Base64;
                Base64 = Base64.Replace("data:image/jpeg;base64,", "");
                int Sex = m.Sex;
                string basePath = "resource\images\public\image\";
                string posterPath = _AppConfigurtaionServices.AppConfigurations.UploadFileDir + basePath;
                posterPath += (Sex == 1 ? "NewYearBabyPosterBG.jpg" : "NewYearBabyPosterBG.jpg");//男女用不同的图
    
                Bitmap image = new Bitmap(posterPath);
                Bitmap headImage = YLYUN.Core.Helper.FileHelper.Base64ToImage(Base64);
    
                Graphics graph = Graphics.FromImage(image);
                //graph.DrawImage(headImage, 30, 800); //直接嵌入
    
                headImage = YLYUN.Core.Helper.FileHelper.CutEllipse(headImage, new Rectangle(0, 0, 620, 620), new Size(620, 620));
    
    
    
                //Bitmap image = YLYUN.Core.Helper.FileHelper.Base64ToImage();
                //Graphics graph = Graphics.FromImage(image);
                graph.DrawImage(headImage, 30, 30); //转换圆形后嵌入
                graph.Dispose();
                string savaPath = basePath + Guid.NewGuid().ToString() + ".jpg";
                string FilePath = _AppConfigurtaionServices.AppConfigurations.UploadFileDir + savaPath;
                image.Save(FilePath);
                //FileStream fs = new FileStream(Base64);
                //拿到裁剪图片与底图融合成新图片
                return Ok(_AppConfigurtaionServices.AppConfigurations.ResourceUrlPath + savaPath);
            }

    CutEllipse:

    /// <summary>
            /// 图片变圆形
            /// </summary>
            /// <param name="img"></param>
            /// <param name="rec"></param>
            /// <param name="size"></param>
            /// <param name="imgSavePath"></param>
            /// <returns></returns>
            public static Bitmap CutEllipse(Image img, Rectangle rec, Size size)
            {
                Bitmap bitmap = new Bitmap(size.Width, size.Height);
                using (Graphics g = Graphics.FromImage(bitmap))
                {
                    using (TextureBrush br = new TextureBrush(img, System.Drawing.Drawing2D.WrapMode.Clamp, rec))
                    {
                        br.ScaleTransform(bitmap.Width / (float)rec.Width, bitmap.Height / (float)rec.Height);
                        g.SmoothingMode = System.Drawing.Drawing2D.SmoothingMode.AntiAlias;
                        g.FillEllipse(br, new Rectangle(Point.Empty, size));
                    }
                }
                return bitmap;
            }
  • 相关阅读:
    罗辑思维 140 认钱不认人(刚需是扯淡,一切都是稀缺,人生全是选择)——理性永远都是最珍贵的
    程序最多能new多少内存(2G内存里要放程序的5大区,HeapAlloc比new要快多了,而且超过2G的时候会告诉你)
    Qt中使用ActiveX(3篇)
    windows下的socket网络编程(入门级)
    网络数据包发送工具PacketSender中文源码
    avalon.js实现一个简易日历
    avalonJS入门(一)
    JS中的模块规范(CommonJS,AMD,CMD)
    程序员必看的书
    简单的语音聊天室
  • 原文地址:https://www.cnblogs.com/DavidHuAtIT/p/12196520.html
Copyright © 2011-2022 走看看