{"id":863,"date":"2020-08-11T22:54:04","date_gmt":"2020-08-11T13:54:04","guid":{"rendered":"https:\/\/www.typea.info\/blog\/?p=863"},"modified":"2020-08-11T22:54:04","modified_gmt":"2020-08-11T13:54:04","slug":"angular-functions-angular-ocr","status":"publish","type":"post","link":"https:\/\/www.typea.info\/blog\/index.php\/2020\/08\/11\/angular-functions-angular-ocr\/","title":{"rendered":"Angular \u304b\u3089\u30c9\u30e9\u30c3\u30b0\u3067\u30d5\u30a1\u30a4\u30eb\u3092Functions\u306b\u30a2\u30c3\u30d7\u30ed\u30fc\u30c9\u3057\u3066OCR"},"content":{"rendered":"<p><\/p>\n<p><a href=\"https:\/\/www.amazon.co.jp\/Angular%E3%83%87%E3%83%99%E3%83%AD%E3%83%83%E3%83%91%E3%83%BC%E3%82%BA%E3%82%AC%E3%82%A4%E3%83%89-%E9%AB%98%E9%80%9F%E3%81%8B%E3%81%A4%E5%A0%85%E7%89%A2%E3%81%AB%E5%8B%95%E4%BD%9C%E3%81%99%E3%82%8B%E3%83%95%E3%83%AD%E3%83%B3%E3%83%88%E3%82%A8%E3%83%B3%E3%83%89%E3%83%95%E3%83%AC%E3%83%BC%E3%83%A0%E3%83%AF%E3%83%BC%E3%82%AF-%E5%AE%87%E9%87%8E-%E9%99%BD%E5%A4%AA-ebook\/dp\/B0786XQQL3\/ref=as_li_ss_il?__mk_ja_JP=%E3%82%AB%E3%82%BF%E3%82%AB%E3%83%8A&amp;dchild=1&amp;keywords=Angular&amp;qid=1597153210&amp;sr=8-14&amp;linkCode=li2&amp;tag=typea09-22&amp;linkId=9250e68981e6e766343ddec9203ef92b&amp;language=ja_JP\" target=\"_blank\" rel=\"noopener noreferrer\"><img decoding=\"async\" src=\"\/\/ws-fe.amazon-adsystem.com\/widgets\/q?_encoding=UTF8&amp;ASIN=B0786XQQL3&amp;Format=_SL160_&amp;ID=AsinImage&amp;MarketPlace=JP&amp;ServiceVersion=20070822&amp;WS=1&amp;tag=typea09-22&amp;language=ja_JP\" border=\"0\"><\/a><img loading=\"lazy\" decoding=\"async\" width=\"1\" height=\"1\" style=\"margin: 0px !important; border: currentcolor !important; border-image: none !important;\" alt=\"\" src=\"https:\/\/ir-jp.amazon-adsystem.com\/e\/ir?t=typea09-22&amp;language=ja_JP&amp;l=li2&amp;o=9&amp;a=B0786XQQL3\" border=\"0\"><\/p>\n<p><a href=\"https:\/\/www.typea.info\/blog\/index.php\/2020\/08\/11\/angular-cloud-functions-ocr\/\">Angular \u304b\u3089\u30d5\u30a1\u30a4\u30eb\u3092\u9078\u629e\u3057\u3001Cloud Functions \u7d4c\u7531\u3067 Cloud Vision \u3092\u547c\u3073\u51fa\u3057\u3066 OCR\u306e\u7d50\u679c\u3092\u8868\u793a\u3059\u308b\u3068\u3053\u308d\u307e\u3067\u306e\u758e\u901a\u78ba\u8a8d\u304c\u3067\u304d\u305f<\/a>\u3002<\/p>\n<p>\u3042\u3068\u3001\u30c9\u30e9\u30c3\u30b0\u3067\u30d5\u30a1\u30a4\u30eb\u3092\u767b\u9332\u3067\u304d\u308b\u3088\u3046\u306b\u3067\u304d\u308c\u3070\u3001\u30a2\u30d7\u30ea\u306b\u7d44\u307f\u8fbc\u3080\u305f\u3081\u306e\u7d20\u6750\u306f\u305d\u308d\u3046\u611f\u3058\u3002<\/p>\n<p>\u3053\u308c\u307e\u3067\u306e\u7d4c\u7def\u3002<\/p>\n<ol>\n<li><a href=\"https:\/\/www.typea.info\/blog\/index.php\/2020\/03\/17\/google-cloud-functinos\/\">Functions\u8a66\u3059<\/a>\n<li><a href=\"https:\/\/www.typea.info\/blog\/index.php\/2020\/03\/22\/cloud_functions_for_firebase_dev_env\/\">Functions\u74b0\u5883\u69cb\u7bc9<\/a>\n<li><a href=\"https:\/\/www.typea.info\/blog\/index.php\/2020\/03\/29\/cloud-functions-firestore-bind\/\">Firestore\u9023\u643a<\/a>\n<li><a href=\"https:\/\/www.typea.info\/blog\/index.php\/2020\/08\/02\/firebase-cli-google-cloud-functions\/\">\u30d5\u30a1\u30a4\u30eb\u30a2\u30c3\u30d7\u30ed\u30fc\u30c9<\/a>\n<li><a href=\"https:\/\/www.typea.info\/blog\/index.php\/2020\/08\/09\/google-cloud-function-vision-api-ocr\/\">Cloud Vision\u9023\u643a<\/a>\n<li><a href=\"https:\/\/www.typea.info\/blog\/index.php\/2020\/08\/11\/angular-cloud-functions\/\">Cloud Functions \u30a2\u30d7\u30ea\u547c\u3073\u51fa\u3057<\/a><\/li>\n<li><a href=\"https:\/\/www.typea.info\/blog\/index.php\/2020\/08\/11\/angular-cloud-functions-ocr\/\">Angular\u304b\u3089Base64\u5316\u3057\u305f\u30d5\u30a1\u30a4\u30eb\u3067Cloud Functiono\u547c\u3073\u51fa\u3057OCR<\/a><\/li>\n<\/ol>\n<p><\/p>\n<p>\u51fa\u6765\u4e0a\u304c\u3063\u305f\u30c7\u30e2\u306f\u3001\u3053\u3093\u306a\u611f\u3058\u3002<\/p>\n<p><iframe loading=\"lazy\" width=\"560\" height=\"315\" src=\"https:\/\/www.youtube.com\/embed\/khS81z8kYbY\" frameborder=\"0\" allowfullscreen=\"\" allow=\"accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture\"><\/iframe><\/p>\n<h2>1.\u624b\u9806<\/h2>\n<p>Angular\u7528\u306b\u3001\u30c9\u30e9\u30c3\u30b0\uff06\u30c9\u30ed\u30c3\u30d7\u3092\u30b5\u30dd\u30fc\u30c8\u3057\u305f\u3001\u30d5\u30a1\u30a4\u30eb\u30a2\u30c3\u30d7\u30ed\u30fc\u30c9 \u30d1\u30c3\u30b1\u30fc\u30b8\u306f\u3044\u304f\u3064\u304b\u3042\u3063\u305f(\u3061\u3087\u3063\u3068\u8a66\u3057\u3066\u307f\u305f\u306e\u306f\u3001<a href=\"https:\/\/valor-software.com\/ng2-file-upload\/\">ng2-file-upload<\/a>)<\/p>\n<p>\u3057\u304b\u3057\u306a\u304c\u3089\u3001<a href=\"https:\/\/www.typea.info\/blog\/index.php\/2020\/08\/11\/angular-cloud-functions-ocr\/\">\u30d5\u30a1\u30a4\u30eb\u306e\u30a2\u30c3\u30d7\u30ed\u30fc\u30c9\u81ea\u4f53\u306f\u3001Base64\u3067JSON\u306b\u306e\u3063\u3051\u3066\u9001\u308b\u3053\u3068\u306b\u3057\u305f\u305f\u3081<\/a>\u3001\u307e\u3041\u30d5\u30a1\u30a4\u30eb\u306e\u30a2\u30c3\u30d7\u30ed\u30fc\u30c9\u81ea\u4f53\u306e\u6a5f\u80fd\u306f\u4e0d\u8981\u3002<\/p>\n<p>\u306a\u306e\u3067\u3001\u30d5\u30a1\u30a4\u30eb\u306e\u30c9\u30ed\u30c3\u30d7\u306b\u7279\u5316\u3057\u305f\u4ee5\u4e0b\u306e\u30d1\u30c3\u30b1\u30fc\u30b8\u3092\u4f7f\u7528\u3059\u308b\u3002<\/p>\n<h2>2.\u30c9\u30ed\u30c3\u30d7\u30d1\u30c3\u30b1\u30fc\u30b8\u306e\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb<\/h2>\n<h3><a href=\"https:\/\/www.npmjs.com\/package\/ngx-dropzone\">ngx-dropzone<\/a><\/h3>\n<pre class=\"prettyprint\">npm install ng2-file-upload --save<\/pre>\n<h2>3.\u5b9f\u88c5<\/h2>\n<h3>3.1 app.module.ts<\/h3>\n<p>\u629c\u7c8b<\/p>\n<pre class=\"prettyprint\">import { BrowserModule } from '@angular\/platform-browser';\nimport { AngularFireModule } from '@angular\/fire';\nimport { AngularFirestoreModule } from '@angular\/fire\/firestore';\nimport { AngularFireFunctionsModule, REGION } from '@angular\/fire\/functions';\nimport { NgxDropzoneModule } from 'ngx-dropzone';\n   :\n\n@NgModule({\n  declarations: [\n    AppComponent,\n     :\n  ],\n  imports: [\n    BrowserModule,\n    AngularFireModule.initializeApp(environment.firebase),\n    AngularFirestoreModule,\n    AngularFireFunctionsModule,\n    NgxDropzoneModule,\n     :\n  ],\n  providers: [\n    { provide: REGION, useValue: 'us-central1' }\n  ],\n  bootstrap: [AppComponent]\n})\nexport class AppModule { }\n<\/pre>\n<p><\/p>\n<h3>3.2 Angular \u30da\u30fc\u30b8<\/h3>\n<p><a href=\"https:\/\/www.npmjs.com\/package\/ngx-dropzone\">ngx-dropzone<\/a>\u306e\u3067\u3082\u30da\u30fc\u30b8\u3092\u53c2\u8003\u306b\u3057\u306a\u304c\u3089\u3002<\/p>\n<pre class=\"prettyprint\">&lt;h1&gt;Fileupload&lt;\/h1&gt;\n&lt;div&gt;\n  &lt;div style=\"padding:20px;\"&gt;\n    &lt;textarea cols=\"60\" rows=\"5\" [(ngModel)]=\"ocrText\"&gt;&lt;\/textarea&gt;\n  &lt;\/div&gt;\n    &lt;div class=\"custom-dropzone\" ngx-dropzone [accept]=\"'image\/*'\" (change)=\"onFileChanged($event)\"&gt;\n    &lt;ngx-dropzone-label&gt;\n      &lt;div&gt;\n        &lt;h2&gt;\u30d5\u30a1\u30a4\u30eb\u3092\u30c9\u30e9\u30c3\u30b0\u3059\u308b\u304b\u30af\u30ea\u30c3\u30af\u3057\u3066\u30d5\u30a1\u30a4\u30eb\u9078\u629e&lt;\/h2&gt;\n      &lt;\/div&gt;\n    &lt;\/ngx-dropzone-label&gt;\n    &lt;ngx-dropzone-image-preview ngProjectAs=\"ngx-dropzone-preview\" *ngFor=\"let f of files\" [file]=\"f\" [removable]=\"true\" (removed)=\"onRemove(f)\"&gt;\n      &lt;ngx-dropzone-label&gt;{{ f.name }} ({{ f.type }})&lt;\/ngx-dropzone-label&gt;\n    &lt;\/ngx-dropzone-image-preview&gt;\n  &lt;\/div&gt;\n  &lt;button (click)=\"onUpload()\"&gt;Upload!&lt;\/button&gt;\n&lt;\/div&gt;\n<\/pre>\n<p>3.3 Angular CSS<\/p>\n<pre class=\"prettyprint\">\u30c9\u30ed\u30c3\u30d7\u30be\u30fc\u30f3\u306e\u30c7\u30b6\u30a4\u30f3\u3092\u30ab\u30b9\u30bf\u30de\u30a4\u30ba\u3067\u304d\u308b\u3002<\/pre>\n<pre class=\"prettyprint\">ngx-dropzone,\n.custom-dropzone {\n  margin: 20px;\n}\n\n.custom-dropzone {\n\theight: 140px;\n\t\/\/background: #333;\n\t\/\/color: #fff;\n\tborder: 2px dashed rgb(235, 79, 79);\n\tborder-radius: 8px;\n\tfont-size: 12px;\n}\n\n.custom-dropzone.ngx-dz-hovered {\n  border: 2px solid rgb(235, 79, 79);\n}<\/pre>\n<h3>3.4 Angular \u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8<\/h3>\n<p>\u57fa\u672c\u7684\u306b\u3001<a href=\"https:\/\/www.typea.info\/blog\/index.php\/2020\/08\/11\/angular-cloud-functions-ocr\/\">\u524d\u56de<\/a>\u3068\u540c\u3058\u3002\u9078\u629e\u3055\u308c\u305f\u30d5\u30a1\u30a4\u30eb\u306e\u53d6\u308a\u6271\u3044\u3092\u5c11\u3057\u5909\u3048\u308b\u3002<\/p>\n<pre class=\"prettyprint\">import { Component, OnInit } from '@angular\/core';\nimport { AngularFireFunctions } from '@angular\/fire\/functions';\nimport { Observable, from } from 'rxjs';\n\n@Component({\n  selector: 'app-management',\n  templateUrl: '.\/management.component.html',\n  styleUrls: ['.\/management.component.scss']\n})\nexport class ManagementComponent implements OnInit {\n  addMessageCallable: any;\n  visionsCallable: any;\n  ocrText: string = \"\";\n  files: File[] = [];\n\n  constructor(private fns: AngularFireFunctions) { \n    this.visionsCallable = fns.httpsCallable('sampleOnCallVisions');\n  }\n\n  ngOnInit(): void {\n  }\n\n  onFileChanged(event) {\n    console.log(event);\n    this.files.push(...event.addedFiles);\n  }\n\n  onRemove(event) {\n    console.log(event);\n    this.files.splice(this.files.indexOf(event), 1);\n  }\n\n  async onUpload() {\n    const reader = new FileReader();\n    const promise = new Promise(function(resolve, reject){\n      reader.onload = (function(){\n          return function(e){\n            \/\/ data:text\/plain;base64,xxxxx\n            var fileBase64 = e.target.result.split(',')[1];\n            resolve(fileBase64);\n          };\n      })();\n    });\n    \n    const selectedFile = this.files[0];\n    console.log(selectedFile);\n    \n    reader.readAsDataURL(selectedFile);\n    const fileBase64 = await promise.then();\n    console.log(fileBase64);\n\n    const observer = this.visionsCallable(\n      {\n        filename: selectedFile.name,\n        base64encodedFile: fileBase64\n      }) as Observable&lt;any&gt;;\n\n    try {\n      const res = await observer.toPromise();\n      this.ocrText = res.result;\n    } catch(e) {\n      console.log(e);\n    }\n  }\n}\n<\/pre>\n<h3>3.5 Functions <\/h3>\n<p>\u3053\u3061\u3089\u306f\u5b8c\u5168\u306b\u3001<a href=\"https:\/\/www.typea.info\/blog\/index.php\/2020\/08\/11\/angular-cloud-functions-ocr\/\">\u524d\u56de<\/a>\u3068\u540c\u3058\u3002<\/p>\n<p><a href=\"https:\/\/www.typea.info\/blog\/index.php\/2020\/08\/11\/angular-cloud-functions-ocr\/\">https:\/\/www.typea.info\/blog\/index.php\/2020\/08\/11\/angular-cloud-functions-ocr\/<\/a><\/p>\n<p>\u3092\u53c2\u7167\u3002<\/p>\n<p>\u3088\u3046\u3084\u304f\u3001\u958b\u767a\u4e2d\u306e\u30a2\u30d7\u30ea\u306b\u6a5f\u80fd\u3092\u7d44\u307f\u8fbc\u3080\u3053\u3068\u304c\u51fa\u6765\u305d\u3046\uff01<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Angular \u304b\u3089\u30d5\u30a1\u30a4\u30eb\u3092\u9078\u629e\u3057\u3001Cloud Functions \u7d4c\u7531\u3067 Cloud Vision \u3092\u547c\u3073\u51fa\u3057\u3066 OCR\u306e\u7d50\u679c\u3092\u8868\u793a\u3059\u308b\u3068\u3053\u308d\u307e\u3067\u306e\u758e\u901a\u78ba\u8a8d\u304c\u3067\u304d\u305f\u3002 \u3042\u3068\u3001\u30c9\u30e9\u30c3\u30b0\u3067\u30d5\u30a1\u30a4\u30eb\u3092\u767b\u9332\u3067\u304d\u308b\u3088\u3046\u306b\u3067\u304d\u308c [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"sns_share_botton_hide":"","vkExUnit_sns_title":"","_vk_print_noindex":"","sitemap_hide":"","_veu_custom_css":"","veu_display_promotion_alert":"","vkexunit_cta_each_option":"","footnotes":""},"categories":[102,104,112,100,116],"tags":[],"class_list":["post-863","post","type-post","status-publish","format-standard","hentry","category-angular","category-firebase","category-google-cloud-functions","category-google-cloud-platform","category-google-cloud-vision"],"veu_head_title_object":{"title":"","add_site_title":""},"_links":{"self":[{"href":"https:\/\/www.typea.info\/blog\/index.php\/wp-json\/wp\/v2\/posts\/863","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.typea.info\/blog\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.typea.info\/blog\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.typea.info\/blog\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.typea.info\/blog\/index.php\/wp-json\/wp\/v2\/comments?post=863"}],"version-history":[{"count":1,"href":"https:\/\/www.typea.info\/blog\/index.php\/wp-json\/wp\/v2\/posts\/863\/revisions"}],"predecessor-version":[{"id":864,"href":"https:\/\/www.typea.info\/blog\/index.php\/wp-json\/wp\/v2\/posts\/863\/revisions\/864"}],"wp:attachment":[{"href":"https:\/\/www.typea.info\/blog\/index.php\/wp-json\/wp\/v2\/media?parent=863"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.typea.info\/blog\/index.php\/wp-json\/wp\/v2\/categories?post=863"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.typea.info\/blog\/index.php\/wp-json\/wp\/v2\/tags?post=863"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}