覆盖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帐户

Sign up for a free Cloudinary account.

注册一个免费的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

覆盖vue.js样式