Phát hiện các logo phổ biến trong hình ảnh với laravel và Google Cloud Vision API
Bài đăng này đã không được cập nhật trong 5 năm
1.Introduction
Hôm nay mình sẽ giới thiệu đến mọi người chức năng Detecting Logos của API Google Cloud Cloud Vision, giúp chúng ta phát hiện các logo phổ biến trong các hình ảnh của mình bằng Laravel. Để đọc thêm về Detecting Logos thì các bạn truy cập ở đây nhé Detecting Logos
2.Prerequisites
Để sử dụng bản dùng thử free API cloud thì bạn làm theo hướng dẫn ở đây nhé create API KEY
3.Getting Started
Sau khi đã hoàn thành việc tạo API KEY ở trên, thì chúng ta tiến hành tạo 1 project ứng dụng của mình:
composer create-project --prefer-dist laravel/laravel detect-logo-project "5.7.*"
Sau khi chúng ta tạo xong project, di chuyển đến thư mục chứa project và chạy lệnh sau để cài đăt package google-cloud-vision-php
composer require wapnen/google-cloud-vision-php
Setting GOOGLE CLOUD KEY API bạn lấy được ở lúc tạo API KEY vào file .env như sau:
GOOGLE_CLOUD_KEY=your_api_key
Tiến hành tạo 1 controller để xử lý phát hiện logo:
php artisan make:controller DetectLogoController
Khai báo trong file routes/web
Route::get('/upload', 'DetectLogoController@upload')->name('detect.upload');
Route::post('/detect', 'DetectLogoController@detect')->name('detect.detect');
Tạo view hiển thị form upload hình ảnh upload.blade.php
<!doctype html>
<html lang="{{ app()->getLocale() }}">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>{{__('Image to text converter with Laravel and Google Cloud Vision')}}</title>
<!-- Fonts -->
<link href="https://fonts.googleapis.com/css?family=Raleway:100,600" rel="stylesheet" type="text/css">
<!-- Styles -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css"
integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">{{ __('DETECT LOGO Project') }}</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
</nav>
<div class="container">
<div class="row justify-content-center">
<div class="col-md-8">
<div class="card">
<div class="card-header">{{ __('Detect logo with Laravel and Google Cloud Vision') }}</div>
<div class="card-body">
@if (session('error'))
<div class="alert alert-danger">{{ session('error') }}</div>
@endif
<form role="form" method="POST" action="{{ route('detect.detect') }}"
enctype="multipart/form-data">
@csrf
<div class="form-group row">
<label for="email"
class="col-sm-4 col-form-label text-md-right">{{ __('Upload image') }}</label>
<div class="col-md-6">
<input id="image" type="file"
class="form-control{{ $errors->has('image') ? ' is-invalid' : '' }}" name="image"
value="{{ old('image') }}" required autofocus>
@if ($errors->has('image'))
<span class="invalid-feedback">
<strong>{{ $errors->first('image') }}</strong>
</span>
@endif
</div>
</div>
<div class="form-group row mb-0">
<div class="col-md-8 offset-md-4">
<button type="submit" class="btn btn-primary">
{{ __('Detect') }}
</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</body>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
crossorigin="anonymous">
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"
integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49"
crossorigin="anonymous">
</script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"
integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T"
crossorigin="anonymous">
</script>
</html>
Cập nhật logic xử lý cho DetectLogoController:
<?php
namespace App\Http\Controllers;
use Exception;
use GoogleCloudVision\GoogleCloudVision;
use GoogleCloudVision\Request\AnnotateImageRequest;
use Illuminate\Http\Request;
class DetectLogoController extends Controller
{
/**
* display Form
*
* @return \Illuminate\Contracts\View\Factory|\Illuminate\View\View
*/
public function upload()
{
return view('upload');
}
/**
* detect logo
*
* @param Request $request
* @return \Illuminate\Http\RedirectResponse
*/
public function detect(Request $request)
{
try {
if ($request->file('image')) {
$fileName = time() . '.' . request()->image->getClientOriginalExtension();
$request->image->move(public_path('images'), $fileName);
$output = imagecreatefromjpeg(public_path("images/{$fileName}"));
$image = base64_encode(file_get_contents(public_path("images/{$fileName}")));
$request = new AnnotateImageRequest();
$request->setImage($image);
$request->setFeature("LOGO_DETECTION");
$gcvRequest = new GoogleCloudVision([$request], env('GOOGLE_CLOUD_KEY'));
$responses = $gcvRequest->annotate();
$results = $responses->responses[0]->logoAnnotations;
foreach ($results as $logo) {
$vertices = $logo->boundingPoly->vertices;
$x1 = $vertices[0]->x;
$y1 = $vertices[0]->y;
$x2 = $vertices[2]->x;
$y2 = $vertices[2]->y;
imagerectangle($output, $x1, $y1, $x2, $y2, 0x00ff00);
}
header('Content-Type: image/jpeg');
imagejpeg($output);
imagedestroy($output);
}
} catch (Exception $e) {
return redirect()->back()->with('error', $e->getMessage());
}
}
}
4.Testing
Run server:
php artisan serve
Tiến hành upload 1 ảnh có chứa logo, đây là link ảnh mình đã sử dụng để test.
Kết quả sau khi đã xử lý:
5.Conclusion
Hy vọng bài viết này sẽ giúp ích cho các bạn khi cần phát hiện các logo phổ biến trong các hình ảnh nào đó, thông qua bài viết này các bạn có thể sử dụng Detecting Faces để nhận dạng khuôn mặt trong hình ảnh của bạn!
All rights reserved
