當前位置：首頁 > 前端技术 > vue >内容正文

vue

覆盖vue.js样式_使用Vue.js和Cloudinary在化身上覆盖眼镜/面罩

發布時間：2023/12/14 vue 27 豆豆

生活随笔收集整理的這篇文章主要介紹了覆盖vue.js样式_使用Vue.js和Cloudinary在化身上覆盖眼镜/面罩小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

覆蓋vue.js樣式

Deep Learning, a subset of machine learning, helps break down tasks in ways that makes all kinds of machine assists seem possible. With deep learning, it is now possible to do image recognition by machines. Instead of hand-coding software programs with a specific set of instructions to accomplish a particular task, the machine is trained using large amounts of data and algorithms that give it the ability to learn how to perform the task.

深度學習是機器學習的一個子集，它以使各種機器輔助似乎都可行的方式幫助分解任務。通過深度學習，現在可以通過機器進行圖像識別。代替使用一組特定的指令手動編碼軟件程序來完成特定任務，而是使用大量數據和算法來訓練機器，從而使機器學習如何執行任務。

Even though you might posses the technical know-how to train models to identify images, and perform some next level facial attribute detection, you now can leverage existing cognitive services to do your bidding.

即使您可能擁有訓練模型以識別圖像并進行下一級面部屬性檢測的技術知識，現在您也可以利用現有的認知服務來進行出價。

我們將建立什么 (What We'll Build)

In this article, we’ll build a demo app with Cloudinary and Microsoft Cognitive service in which users can test different glasses and masks to see it looks on them before making a purchase.

在本文中，我們將使用Cloudinary和Microsoft Cognitive服務構建一個演示應用程序，在該應用程序中， 用戶可以在購買前測試不同的眼鏡和口罩，以查看外觀 。

Applying deep learning to enhance our business? Yes, we are!

應用深度學習來增強我們的業務？是的我們是！

什么是Cloudinary？ (What is Cloudinary?)

Cloudinary is a cloud platform that provides solutions for image and video management, including server or client-side upload, a huge range of on-the-fly image and video manipulation options, quick content delivery network (CDN) delivery and powerful asset management options.

Cloudinary是一個云平臺，提供用于圖像和視頻管理的解決方案，包括服務器或客戶端上載，大量的實時圖像和視頻處理選項，快速內容交付網絡（CDN）交付以及強大的資產管理選項。

Cloudinary enables web and mobile developers to address all of their media management needs with simple bits of code in their favorite programming languages or frameworks, leaving them free to focus primarily on their own product's value proposition.

Cloudinary使Web和移動開發人員可以使用自己喜歡的編程語言或框架中的簡單代碼來滿足其所有媒體管理需求，從而使他們可以自由地將精力集中在自己產品的價值主張上。

讓我們開始吧 ( Let’s Get Started )

Step 1: Create a Cloudinary Account

步驟1：建立Cloudinary帳戶

@media (max-width: 1280px) { .go-go-gadget-react img:first-child { display: none; } }@media (max-width: 780px) {.go-go-gadget-react { flex-direction: column; }.go-go-gadget-react img { margin-left: 0 !important; margin-bottom: 12px !important; }.header-thingy { margin-top: 20px; }.button-thingy { margin-left: 0 !important; margin-top: 12px !important; }} @media (max-width: 1280px) { .go-go-gadget-react img:first-child { display: none; } }@media (max-width: 780px) {.go-go-gadget-react { flex-direction: column; }.go-go-gadget-react img { margin-left: 0 !important; margin-bottom: 12px !important; }.header-thingy { margin-top: 20px; }.button-thingy { margin-left: 0 !important; margin-top: 12px !important; }}

注冊一個免費的Cloudinary帳戶。

Once you are signed up, you will be redirected to the dashboard where you can get your credentials.

注冊后，您將被重定向到儀表板，您可以在其中獲取憑據。

Take note of your Cloud name, API Key and API Secret

記下您的云名稱， API密鑰和API機密

Step 2: Set Up A Node Server

步驟2：設置節點服務器

Initialize a package.json file:

初始化package.json文件：

npm init

Install the following modules:

安裝以下模塊：

npm install express connect-multiparty cloudinary cors body-parser --save

express: We need this module for our API routes connect-multiparty: Needed for parsing http requests with content-type multipart/form-data cloudinary: Node SDK for Cloudinary body-parser: Needed for attaching the request body on express’s req object cors: Needed for enabling CORS

express：我們的API路由需要使用此模塊connect-multiparty：使用內容類型multipart / form-data解析HTTP請求時需要cloudinary：Cloudinary的 Node SDK 主體解析器：需要將請求主體附加到express的req對象上：啟用CORS所需

Step 3: Activate Advanced Facial Attributes Detection Add-on

步驟3：激活高級面部屬性檢測插件

Go to the dashboard add-ons section. Click on Rekognition Celebrity Detection Add-on and select the Free Plan.

轉到儀表板插件部分。單擊“ 認可名人檢測插件”，然后選擇“免費計劃”。

Note: You can change to other plans as your usage increases.

注意：隨著使用量的增加，您可以更改為其他計劃。

Step 4: Identify Facial Attributes

步驟4：識別面部屬性

Create a server.js file in your root directory. Require the dependencies we installed:

在您的根目錄中創建一個server.js文件。需要我們安裝的依賴項：

const express = require('express'); const app = express(); const multipart = require('connect-multiparty'); const cloudinary = require('cloudinary'); const cors = require('cors'); const bodyParser = require('body-parser');app.use(bodyParser.json()); app.use(bodyParser.urlencoded({ extended: true })); app.use(cors());const multipartMiddleware = multipart();

Next, configure Cloudinary:

接下來，配置Cloudinary：

cloudinary.config({cloud_name: 'xxxxxxxx',api_key: 'xxxxxxxx',api_secret: 'xxxxxxx' });

Replace xxxxxx with the real values from your dashboard.

用儀表板上的實際值替換xxxxxx 。

Add the route for uploading. Let’s make the route /upload.

添加上傳路徑。讓我們來做路由/upload 。

app.post('/upload', multipartMiddleware, function(req, res) {// Upload to Cloudinarycloudinary.v2.uploader.upload(req.files.image.path,function(error, result) {res.json(result);},// Specify Transformation & Facial Attributes Detection{transformation: [{ width: 700, radius: "max", crop: "scale" },{ flags: "region_relative", gravity: "adv_eyes", overlay: req.body.item, width: "1.7" }]});

Quickly take a look at the overlay parameter. It takes in a value of req.body.item. In this app, the values are either glasses or harlequinmask.

快速查看一下overlay參數。它采用req.body.item的值。在此應用中，值可以是glasses或harlequinmask 。

Note: I uploaded two photos to my Cloudinary account and made sure they were renamed glasses and harlequinmask. These are the two images we will use as overlays in this app.

注：我上傳的兩張照片給我Cloudinary的帳戶，并確保他們分別更名為glasses和harlequinmask 。這是我們將在此應用程序中用作疊加層的兩張圖像。

harlequinmask and glasses respectively. Go ahead and upload them to your account too.

丑角面具和眼鏡。繼續并將它們上傳到您的帳戶。

The Advanced Facial Attribute Detection add-on detects specific facial attributes, including the exact position of the eyes of each face in a photo. Based on this information, Cloudinary can position overlays on top of all the detected eye pairs in an image.

“ 高級面部屬性檢測”附加組件可檢測特定的面部屬性，包括照片中每張臉的眼睛的確切位置。根據此信息，Cloudinary可以將疊加層放置在圖像中所有檢測到的眼睛對的頂部。

To smartly overlay the glasses or harlequinmask on top of the detected eye pairs in the image, the user uploads, the overlay parameter is set to the ID of the harlequinmask or glasses image and the gravity parameter is set to adv_eyes. We also set the regionrelative_ flag together with a 1.7 width to scale the overlay to 170 percent of the width of the detected eyes, and resize the image to an oval thumbnail with a width of 700 pixels.

為了在圖像中檢測到的眼睛對上harlequinmask地覆蓋glasses或harlequinmask ，用戶上傳，將overlay參數設置為harlequinmask 面具或glasses圖像的ID，并將引力參數設置為adv_eyes 。我們還將區域 relative_標志設置為1.7寬度，以將覆蓋比例縮放為檢測到的眼睛寬度的170％，并將圖像的大小調整為寬度為700像素的橢圓形縮略圖。

Once a user makes a POST request to the /upload route, the route grabs the image file from the HTTP request, uploads to Cloudinary, identifies the pair of eyes and overlays them with whatever option the user chooses (either glasses or harlequinmask) and returns the right URL.

用戶向/upload路由發出POST請求后，該路由會從HTTP請求中獲取圖像文件，然后上傳至Cloudinary，識別出這雙眼睛，并用用戶選擇的任何選項（ glasses或harlequinmask ）覆蓋它們，然后返回正確的網址。

Note: The Advanced Facial Attribute Detection add-on is an integrated face detection solution that utilizes Microsoft Cognitive Services. Microsoft Cognitive Services provides high precision face location detection with state-of-the-art, cloud-based algorithms that can detect up to 64 human faces in an image. The detected faces are returned with rectangles (left, top, width and height) indicating the location of faces in the image in pixels, the exact position details of the eyes, mouth, eyebrows, nose and lips, as well as a series of face-related attributes from each face, such as pose, gender and age.

注意：高級面部屬性檢測插件是一個集成的面部檢測解決方案，利用Microsoft認知服務。 Microsoft Cognitive Services使用基于云的最新算法提供高精度的面部位置檢測，該算法可以檢測圖像中多達64張人臉。返回的檢測到的面部帶有矩形（左側，頂部，寬度和高度），以像素為單位指示圖像中面部的位置，眼睛，嘴巴，眉毛，鼻子和嘴唇的確切位置細節以及一系列面部每個面Kong的相關屬性，例如姿勢，性別和年齡。

Test the functionality with Postman.

使用Postman測試功能。

Step 5: Build the Frontend

步驟5：構建前端

We’ll use the progressive framework, [Vue.js] to quickly flesh out the frontend. Let’s get started by installing the CLI:

我們將使用漸進式框架[Vue.js]快速充實前端。讓我們開始安裝CLI：

npm install -g vue-cli

Next, create a simple Vue project using the Vue CLI tool we installed:

接下來，使用我們安裝的Vue CLI工具創建一個簡單的Vue項目：

vue init simple productshowcase

Inside the productshowcase directory, create an index.html file and add the following code to it:

在productshowcase目錄中，創建一個index.html文件并向其中添加以下代碼：

<!DOCTYPE html> <html> <head><title>Welcome to Vue</title><script src="https://unpkg.com/vue"></script><script src="https://unpkg.com/axios/dist/axios.min.js"></script><link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> </head> <body><div id="app"><div class="container" style="margin-top: 3%; margin-left: 2%;"><div class="col-md-6"><div><div class="col-md-6"><img src="http://res.cloudinary.com/unicodeveloper/image/upload/v1505797868/glasses.png" width="200" height="100" /><span> Glasses </span></div><div class="col-md-6"><img src="http://res.cloudinary.com/unicodeveloper/image/upload/v1505794374/oie_transparent.png" width="200" height="100" /><span> Harlequin Mask </span></div></div><hr /><form enctype="multipart/form-data" @submit.prevent="onSubmit"><div class="form-group"><select class="form-control" name="item" v-model="model.item"><option disabled value="">Choose an item</option><option value="glasses"> Glasses </option><option value="harlequinmask"> Harlequin Mask </option></select></div><div class="form-group"><label for="">File:</label><input type="file" class="form-control" accept="image/*" name="image" v-on:change="upload($event.target.files)"></div><div class="form-group"><button class="btn btn-primary" >Upload</button>{{ loading }}</div></form></div><div class="col-md-4"><div class="col-md-6" style="margin-top: 20%;"><img id="originalface" class="img-responsive" alt="" width="600" height="600"></div><div class="col-md-6" style="margin-top: 20%;"><img :src="maskedface" class="img-responsive" alt="" width="400" height="400"></div></div></div></div><script>new Vue({el: '#app',data: function() {return {model: {text: '',image: null,item: ''},maskedface: null,loading: '',}},methods: {upload: function(files) {this.model.image = files[0]this.showPreview(files[0]);},showPreview: function(file) {var reader = new FileReader();reader.onload = function (e) {document.getElementById("originalface").src = e.target.result;};// read the image file as a data URL.reader.readAsDataURL(file);},onSubmit: function() {// Assemble form dataconst formData = new FormData()formData.append('image', this.model.image);formData.append('item', this.model.item);this.loading = "Processing....Please be patient."// Post to serveraxios.post('http://localhost:3333/upload', formData).then(res => {// Update UIthis.maskedface = res.data.urlthis.loading = ''})}}})</script> </body> </html>

Now, run the app.

現在，運行該應用程序。

What’s going on here? Don’t be scared, let’s step through the code. First we have a form for uploading of images.

這里發生了什么？不要害怕，讓我們逐步看一下代碼。首先，我們有一個上傳圖像的表格。

<form enctype="multipart/form-data" @submit.prevent="onSubmit"><div class="form-group"><select class="form-control" name="item" v-model="model.item"><option disabled value="">Choose an item</option><option value="glasses"> Glasses </option><option value="harlequinmask"> Harlequin Mask </option></select></div><div class="form-group"><label for="">File:</label><input type="file" class="form-control" accept="image/*" name="image" v-on:change="upload($event.target.files)"></div><div class="form-group"><button class="btn btn-primary" >Upload</button>{{ loading }}</div></form>

We bind the upload form to an upload event handler. There is a change event attached to the select file button. Once a user selects a file, the showPreview method called in the Vue instance below is invoked. This method shows a thumbnail preview of the image about to be uploaded.

我們將上傳表單綁定到上傳事件處理程序。選擇文件按鈕上附有更改事件。用戶選擇文件后，將在下面的Vue實例中調用showPreview方法。此方法顯示要上傳的圖像的縮略圖預覽。

Thumbnail preview of the image about to be uploaded.

要上傳的圖像的縮略圖預覽。

Check out the methods, model and data properties on our Vue instance.

在我們的Vue實例上檢查方法，模型和數據屬性。

new Vue({el: '#app',data: function() {return {model: {text: '',image: null,item: ''},maskedface: null,loading: '',}},methods: {upload: function(files) {this.model.image = files[0]this.showPreview(files[0]);},showPreview: function(file) {var reader = new FileReader();reader.onload = function (e) {document.getElementById("originalface").src = e.target.result;};// read the image file as a data URL.reader.readAsDataURL(file);},onSubmit: function() {// Assemble form dataconst formData = new FormData()formData.append('image', this.model.image);formData.append('item', this.model.item);this.loading = "Processing....Please be patient."// Post to serveraxios.post('http://localhost:3333/upload', formData).then(res => {// Update UIthis.maskedface = res.data.urlthis.loading = ''})}}})

When the form is submitted, it calls the onSubmit function in our Vue method. The onSubmit method then makes a post request to the backend and returns data back to the frontend.

提交表單后，它將在我們的Vue方法中調用onSubmit函數。然后， onSubmit方法向后端發出發布請求，并將數據返回給前端。

The data returned is the modified image with the overlay. And this reflects on the UI.

返回的數據是帶有疊加層的修改后的圖像。這反映在用戶界面上。

Harlequin Mask selected and an Image of Rihanna uploaded.

選擇了《丑角面具》，并上傳了《蕾哈娜》的圖片。

Glasses selected and an Image of Christian Nwamba, a.k.a codebeast, uploaded!

選擇了眼鏡，并上傳了克里斯汀·恩旺巴（又名Codebeast）的圖像！

Feel free to check out the source code here.

請在此處隨意查看源代碼。

結論 ( Conclusion )

We just performed a facial attribute detection together with an Image overlay transformation with Cloudinary. The options are limitless as to what you can do with the information in this tutorial.

我們只是使用Cloudinary進行了面部屬性檢測以及圖像疊加轉換。關于如何使用本教程中的信息，這些選項是無限的。

Go forth and enhance your business with products that users will love. And Oh you don’t have to spend time building them, Cloudinary’s got you!

繼續使用用戶會喜歡的產品來增強您的業務。而且，您不必花費時間來構建它們，Cloudinary可以幫助您！

翻譯自: https://scotch.io/tutorials/overlay-glassesmasks-on-avatars-with-vuejs-and-cloudinary