HTML5實現頭像的上傳

TML5實現頭像的上傳

這是利用form-data給后臺傳輸數據，來實現頭像的上傳加載！

html代碼

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    </head>
<body>
    <div class="container">
        <input enctype="multipart/form-data" type="file">
        <input id="Susername"  type="text" placeholder="用戶名">
        <input id="Ssex" type="number" placeholder="年齡">
        <input id="Sage" type="text" placeholder="專業">
        <input id="Smajor" type="text" placeholder="學校">
        <input id="Sschool" type="text" placeholder="QQ">
        <input id="Sqq" type="text" placeholder="地址">
        <input id="Saddress" type="text" placeholder="座右銘">
        <input id="Smotto" type="button" value="上傳">
       
        <div style="clear: both;"></div>
             <progress value="0" max="100"></progress>
    </div>
    <div class="showarea">
        <h3>顯示區域</h3>
    </div>
    </body>
</html>

樣式代碼

 .container{
            box-sizing: border-box;
            width: 404px;
            height: 100px;
            border: 1px solid #ccc;
            border-radius: 5px;
            padding-top: 20px;
            background: linear-gradient(to bottom,#0ff,#0ff 20px,transparent 0);
            margin: 0 auto;
        }
        input{
            padding: 0;
            margin: 0;
          
        }
        .container input[type=file]{
            width: 300px;
            height: 30px;
            border: 1px solid #ccc;
            background: #7FFFD4;
            color: #133131;
            float: left;
        }
        .container input[typr=button]{
            width: 100px;
            height: 32px;
            float: left;
            border: 1px solid #ccc;
            color:  #133131;
        }
        progress{
            display: none;
            width: 400px;
            height: 30px;
            margin-top: 7px;
        }
        .showarea{
            width: 600px;
            min-height: 200px;
            border: 1px solid #ccc;
            margin: 30px auto;
        }
        .showarea h3{
            widows: 100px;
            margin: 0 auto;
            line-height: 60px;
            text-align: center;
            border-bottom: 1px solid #cccc;
            color: #133131;
            
        }
        .showareaimg{
            max-width: 1000%;
        }

javescript代碼

言

本文主要介紹如何使用OpenCV剪切圖形中的人物頭像。

準備工作

首先創建一個Wpf項目——OpenCV_Face_Wpf，這里版本使用Framework4.7.2。

然后使用Nuget搜索【Emgu.CV】，如下圖。

這里的Emgu.CV選擇4.3.0.3890版本，然后安裝Emgu.CV和Emgu.CV.runtime.windows。

然后下載所需文件haarcascade_frontalface_default.xml。

可以去OpenCV的開源代碼中下載，下載地址：https://github.com/opencv/opencv/tree/master/data/haarcascades。

然后將文件加入進項目，并修改屬性，讓xml文件輸出到啟動目錄，如下圖。

使用OPenCV剪切人臉部分

現在，我們進入項目，進行OPenCV的調用。

首先引入命名空間，如下：

using Emgu.CV;

using Emgu.CV.CvEnum;

using Emgu.CV.Structure;

using System.Drawing;

using System.Windows.Forms;

然后編寫人臉剪切函數——CutFace。

函數里，我們先使用CascadeClassifier類讀取haarcascade_frontalface_default.xml文件，建立人臉檢測的對象。

再使用Mat類來導入圖片（灰度模式）。

然后再使用人臉檢測的對象的方法——DetectMultiScale進行人臉數量識別。

最后通過Bitmap類把識別出來的人臉進行剪切保存。

代碼如下：

public void CutFace(string filename)

{

//CvInvoke.UseOpenCL=CvInvoke.HaveOpenCLCompatibleGpuDevice;//使用GPU運算

var face=new CascadeClassifier("haarcascade_frontalface_default.xml");

var mat=new Mat(filename, ImreadModes.Grayscale);//灰度導入圖片

int minNeighbors=7;//最小矩陣組，默認3

var size=new System.Drawing.Size(10, 10);//最小頭像大小

var facesDetected=face.DetectMultiScale(mat, 1.1, minNeighbors, size);

//循環把人臉部分切割出來并保存

int index=0;

var bitmap=Bitmap.FromFile(filename);

foreach (var item in facesDetected)

{

index++;

var bmpOut=new Bitmap(item.Width, item.Height, System.Drawing.Imaging.PixelFormat.Format24bppRgb);

var g=Graphics.FromImage(bmpOut);

g.DrawImage(bitmap, new System.Drawing.Rectangle(0, 0, item.Width, item.Height),

new System.Drawing.Rectangle(item.X, item.Y, item.Width, item.Height), GraphicsUnit.Pixel);

g.Dispose();

bmpOut.Save($"Face_{index}.png", System.Drawing.Imaging.ImageFormat.Png);

bmpOut.Dispose();

}

bitmap.Dispose();

mat.Dispose();

face.Dispose();

}

然后編寫一個打開文件的函數，在成功打開文件后調用CutFace。

public void SelectImg()

{

System.Windows.Forms.OpenFileDialog frm=new System.Windows.Forms.OpenFileDialog();

frm.Filter="(*.jpg,*.png,*.jpeg,*.bmp)|*.jgp;*.png;*.jpeg;*.bmp|All files(*.*)|*.*";

if (frm.ShowDialog()==System.Windows.Forms.DialogResult.OK)

{

CutFace(frm.FileName);

}

現在我們啟動項目，如下圖：

運行結果

點擊界面中的打開圖片，選中帶人臉的圖片進行測試。

代碼中默認把剪切的圖片保存到Debug文件夾下，我們打開Debug文件夾，如下圖：

因為我選中的圖片只有一個人臉，所以得到一個剪切圖片——Face_1.png。

原圖與剪切后的圖片對比如下：

現在，我們換一個人臉多的圖片，再測試一下。測試圖片如下。

運行后結果如下：

----------------------------------------------------------------------------------------------------

到此C#使用OpenCV剪切圖形中的人物頭像就已經介紹完了。

代碼已經傳到Github上了，歡迎大家下載。

Github地址： https://github.com/kiba518/OpenCV_Face_Wpf

原文地址：https://www.cnblogs.com/kiba/p/14428557.html

案一：html代碼，利用img標簽的crossorigin屬性

微信頭像，指向微信的頭像地址，跨域請求資源，資源可以顯示，但是html2canvas會有跨域的問題，主要利用是 crossorigin="anonymous"，使html2canvas可以截取到該標簽

如果是自己的服務器上的圖片，要提供給其他域名下的頁面，crossorigin="annoymous"可能導致錯誤，這個時候把自己的服務器上訪問圖片的那段請求加上add_header Access-Control-Allow-Origin *;配置，（這是nginx服務器上的配置）。但也要注意資源可能被隨意下載，所以可以只在需要公開的目錄加上這個配置。

方案二：js代碼，下載圖片，并讀取為base64格式，然后設置為img的src

在線咨詢

上一篇：請用無窮級數的知識來確定koch雪花的周長和面積
下一篇：12 個動態 JavaScript 動畫庫增強用戶體

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

HTML5實現頭像的上傳

TML5實現頭像的上傳

這是利用form-data給后臺傳輸數據，來實現頭像的上傳加載！

您的項目需求

這是利用form-data給后臺傳輸數據，來實現頭像的上傳加載！