Создание забавного приложения с помощью Ionic Studio и Cloudinary

В мире JAMstack Cloudinary является лидером рынка как комплексная облачная платформа для управления изображениями и видео, которую используют сотни тысяч пользователей по всему миру, от стартапов до предприятий. Фактически, она широко известна как лучшее решение для размещения визуальных медиа в Интернете.Ionic Studio — это надежная IDE, которая эффективно и плавно позволяет разрабатывать кроссплатформенные приложения. В своем заявлении от ноября 2018 года генеральный директор Макс Линч убедительно рассказывает о многих впечатляющих возможностях Ionic Studio, дополняя его демонстрационным видео.В этом посте описывается процедура загрузки изображений в Cloudinary в качестве прелюдии к созданию забавного приложения под названием Face Smash с помощью Ionic Studio. Вы загружаете фотографию в Cloudinary с помощью API загрузки, а затем, используя функцию Cloudinary по определению лиц, заставляете Cloudinary отобразить все загруженные фотографии людей с той, которую вы только что загрузили, в верхней части. Нажмите на эту фотографию, и появится шарик с водой, который разобьет лицо на фотографии.Читайте далее, как это сделать.

Загрузка с помощью API Cloudinary

Загрузите фотографии в Cloudinary с помощью API для загрузки изображений, без подписи, и заполните конечную точку.

API для загрузки изображений

Для загрузки изображений в Cloudinary с помощью API доступно несколько SDK. Для простоты используйте тип конечной точки для неподписанных загрузок для этого приложения.Загрузите эту фотографию меня в столь желанной шапке Ionic-…

-указав JPEG-изображение с параметром file, как показано ниже:

«`plain text
file=https://res.cloudinary.com/ajonp/image/upload/q_auto/AlexPics/alex_ionic_hat_inside.webp




Cloudinary then adds a copy of that image to a location on a Cloudinary server.{note} The URL under `file` above is an example only. Feel free to specify a URL of your choice. {/note}Even though this app requires that you take a picture and then reference it with the `file` parameter, Cloudinary ultimately sends the Base64-encoded string to the endpoint.For details on all the upload options, see the [related Cloudinary documentation](https://cloudinary.com/documentation/upload_images#data_upload_options).

### Unsigned Uploads

To save time, opt for [unsigned-uploads](https://cloudinary.com/documentation/upload_images#unsigned_upload) to directly upload to Cloudinary from a browser or mobile app with no signature for authentication, bypassing your servers. However, for security reasons, you cannot specify certain upload parameters with unsigned upload calls. One of those parameters is `upload_preset`, a requirement for this app.As a workaround, create an upload preset in this screen in the Cloudinary [Console](https://cloudinary.com/console/settings/upload):

![](https://media.codingcat.dev/image/upload/v1657636762/main-codingcatdev-photo/83ba8a5e-21ab-4950-9c99-cf35be2c82f6.png)

That preset places all the newly uploaded photos in a folder called `ajonp-ionic-cloudinary-facesmash`, as specified at the bottom of the settings screen:.

![](https://media.codingcat.dev/image/upload/v1657636761/main-codingcatdev-photo/6b136472-a72d-41a6-aef3-ea68dc6dbb00.png)

upload_preset is now all set for incorporation into the code:

### Endpoint Uploads

Now complete the upload through the endpoint:



```html
<video controls="controls" height="600">
  <source
    src="https://res.cloudinary.com/ajonp/video/upload/q_auto/ajonp-ajonp-com/blog/cloudinary_api_endpoing_upload.webm"
    type="video/webm"
  />
  <source
    src="https://res.cloudinary.com/ajonp/video/upload/q_auto/ajonp-ajonp-com/blog/cloudinary_api_endpoing_upload.mp4"
    type="video/mp4"
  />
</video>


Вход в полноэкранный режим Выйти из полноэкранного режима

«`plain text
https://api.cloudinary.com/v1_1/ajonp/image/upload?file=https://res.cloudinary.com/ajonp/image/upload/q_auto/AlexPics/alex_ionic_hat_inside.webp&upload_preset=kuqm4xkg




Afterwards, a JSON payload returns, as in this example:



```json
{
  "public_id": "ajonp-ionic-cloudinary-facesmash/raumizdelqrlows7pvzy",
  "version": 1565650174,
  "signature": "59905774f17ea06629ff90b73dfc9bed6c7fbdfd",
  "width": 2448,
  "height": 3264,
  "format": "jpg",
  "resource_type": "image",
  "created_at": "2019-08-12T22:49:34Z",
  "tags": [
    "facesmash",
    "face",
    "head",
    "chin",
    "selfie",
    "forehead",
    "photography",
    "fun"
  ],
  "pages": 1,
  "bytes": 1882858,
  "type": "upload",
  "etag": "4ae8ba0edfb90689101fdfbb8b97548d",
  "placeholder": false,
  "url": "http://res.cloudinary.com/ajonp/image/upload/q_auto/ajonp-ionic-cloudinary-facesmash/raumizdelqrlows7pvzy.webp",
  "secure_url": "https://res.cloudinary.com/ajonp/image/upload/q_auto/ajonp-ionic-cloudinary-facesmash/raumizdelqrlows7pvzy.webp",
  "access_mode": "public",
  "moderation": [
    {
      "response": { "moderation_labels": [] },
      "status": "approved",
      "kind": "aws_rek",
      "updated_at": "2019-08-12T22:49:36Z"
    }
  ],
  "info": {
    "categorization": {
      "google_tagging": {
        "status": "complete",
        "data": [
          { "tag": "Face", "confidence": 0.9635 },
          { "tag": "Head", "confidence": 0.9097 },
          { "tag": "Chin", "confidence": 0.8504 },
          { "tag": "Selfie", "confidence": 0.8183 },
          { "tag": "Forehead", "confidence": 0.7823 },
          { "tag": "Photography", "confidence": 0.738 },
          { "tag": "Fun", "confidence": 0.7039 },
          { "tag": "Headgear", "confidence": 0.6748 },
          { "tag": "Cap", "confidence": 0.6577 },
          { "tag": "T-shirt", "confidence": 0.5763 },
          { "tag": "Smile", "confidence": 0.5404 }
        ]
      }
    }
  },
  "faces": [[132, 906, 808, 1077]],
  "coordinates": { "faces": [[132, 906, 808, 1077]] },
  "original_filename": "alex_ionic_hat_inside"
}
Войти в полноэкранный режим Выход из полноэкранного режима

Обратите внимание на эту ключевую строку, которая показывает, что Cloudinary уловил лицо в координатах:

"coordinates": { "faces": [[132, 906, 808, 1077]] }
Войти в полноэкранный режим Выйти из полноэкранного режима

Однако иногда распознавание лиц не срабатывает. Например, он не распознал, что это моя фотография, вероятно, из-за теней от моей шляпы:

Вот еще одна проблемная фотография, которая получилась в результате ошибочных координат при распознавании лица, как показано на втором рисунке:

Я буду рад поработать с командой Cloudinary, чтобы улучшить процент успешного распознавания лиц.

Использование функции распознавания лиц в Cloudinary

В документации Cloudinary по обнаружению лиц подробно описано, как трансформировать обнаруженные изображения путем добавления параметров… Для начала, с помощью параметра g_face вы добавляете гравитацию к положению самого большого лица на изображении, после чего можете манипулировать им по своему усмотрению. Все изображения в этом приложении отображаются в виде миниатюр, как определено в этом коде:

«plain text
http://res.cloudinary.com/ajonp/image/upload/w_1000,h_1000,c_crop,g_face,r_max/w_200/v1565650174/ajonp-ionic-cloudinary-facesmash/raumizdelqrlows7pvzy.webp




An example is this cropped thumbnail:

![](https://media.codingcat.dev/image/upload/v1657636761/main-codingcatdev-photo/59ade389-4019-4cce-8ac5-d9df68ea8e16.jpg)

## Being careful in naming apps

I can’t help but think of [Facemash from the Social Network](https://youtu.be/VSKoVsHs_Ko), and don't want their to be confusion, this is a very fun project and we won't be rating anyone ????!! I am hoping that the Amazon Rekognition AI Moderation will catch most the bad stuff. If it gets out of hand I am going to take it down. I don't ever want to degrade anyone and write a [facemash apology](https://www.thecrimson.com/article/2003/11/19/facemash-creator-survives-ad-board-the/) like Zuck?
Вход в полноэкранный режим Выход из полноэкранного режима

Оцените статью
devanswers.ru
Добавить комментарий