貓哥說
我最近在做一個(gè)社交 APP，里面需要圖片、視頻的編輯器，如果你和我一樣有這樣的需求
你可以試試這款 https://img.ly
原文
源碼
https://github.com/Wizpna/photo_editor.git
參考
- https://img.ly/photo-sdk
- https://pub.dev/packages/photo_editor_sdk
- https://pub.dev/packages/image_picker
正文
大家好，在今天的文章中，你將學(xué)習(xí)如何使用 Flutter 和 Img.ly 構(gòu)建一個(gè)照片編輯應(yīng)用程序。
但是，在我深入本教程的技術(shù)方面之前，我想對(duì) IMG.LY 做一個(gè)簡單的解釋。
IMG.LY 是一家總部位于德國的公司，通過其圖片和視頻編輯 SDK 提供最先進(jìn)的圖像和視頻處理解決方案。
主要用于照片編輯目的，而且 SDK 很容易在移動(dòng)應(yīng)用程序上實(shí)現(xiàn)。
那么讓我們開始吧
使用 Visual Studio、 IntelliJ 或 Android Studio 創(chuàng)建一個(gè)新的 Flutter 項(xiàng)目。
成功創(chuàng)建一個(gè)新的 flutter 項(xiàng)目后，打開“ pubspec.yaml”，并安裝 photo_editor_sdk 和 image_picker 插件。
dependencies:
photo_editor_sdk: ^2.0.0
image_picker: ^0.8.1+3
注意: image_picker 這個(gè)插件將用于從設(shè)備中獲取照片，而 photo_editor_sdk 將用于照片編輯。
為 Android 配置 PhotoEditor SDK
SDK 相當(dāng)大，因此你需要為你的項(xiàng)目啟用 Multidex 如下:
- 編輯
android/build.gradle并在頂部添加以下行
buildscript {
repositories {
google()
jcenter()
maven { url "https://artifactory.img.ly/artifactory/imgly" }
}
dependencies {
classpath 'com.android.tools.build:gradle:4.1.0' classpath "org.jetbrains.kotlin:kotlin-gradle-plugin:$kotlin_version" classpath 'ly.img.android.sdk:plugin:8.3.1'
}
}
請(qǐng)注意: 為了更新 Android 版本的 PhotoEditor SDK，將版本字符串 version 8.3.1 替換為更新的版本 newer release 。
- 打開
**android/app/build.gradle** file(notandroid/build.gradle) 并在末尾添加以下代碼行:
android {
defaultConfig {
applicationId "com.example.photo_editor" minSdkVersion 16
targetSdkVersion 30
versionCode flutterVersionCode.toInteger()
versionName flutterVersionName
multiDexEnabled true
}
}
dependencies {
implementation "org.jetbrains.kotlin:kotlin-stdlib-jdk7:$kotlin_version"
implementation 'androidx.multidex:multidex:2.0.1'
}
- 打開
android/app/build.gradlefile (notandroid/build.gradle) 在 apply plugin 下面添加以下行apply plugin: "com.android.application":
apply plugin: 'ly.img.android.sdk'
apply plugin: 'kotlin-android'
apply plugin: 'ly.img.android.sdk'apply from: "$flutterRoot/packages/flutter_tools/gradle/flutter.gradle"http:// Comment out the modules you don't need, to save size.
imglyConfig {
modules {
include 'ui:text'
include 'ui:focus'
include 'ui:frame'
include 'ui:brush'
include 'ui:filter'
include 'ui:sticker'
include 'ui:overlay'
include 'ui:transform'
include 'ui:adjustment'
include 'ui:text-design'// This module is big, remove the serializer if you don't need that feature.
include 'backend:serializer'// Remove the asset packs you don't need, these are also big in size.
include 'assets:font-basic'
include 'assets:frame-basic'
include 'assets:filter-basic'
include 'assets:overlay-basic'
include 'assets:sticker-shapes'
include 'assets:sticker-emoticons'include 'backend:sticker-smart'
}
}
為 iOS 設(shè)置 ImagePicker
打開 <project root>/ios/Runner/Info.plist 并將以下鍵添加到 Info.plist 文件中
<key>NSPhotoLibraryUsageDescription</key>
<string>app needs permission for the photo library</string>
<key>NSCameraUsageDescription</key>
<string>app needs access to the camera.</string>
<key>NSMicrophoneUsageDescription</key>
<string>app needs access to the microphone, if you intend to record videos.</string>
打開你的 main.dart 文件，像下面的代碼片段一樣更新你的代碼:
您必須創(chuàng)建一個(gè)名為 imgFromGallery 的方法
當(dāng)調(diào)用 imgFromGallery 方法時(shí)，它將打開設(shè)備上的圖像目錄。
下一步將創(chuàng)建另一個(gè)名為 imglyEditor. 的方法。
當(dāng)調(diào)用 imglyEditor 方法時(shí)，它將打開 Img.ly 編輯器。
使用物理設(shè)備或模擬器測(cè)試運(yùn)行應(yīng)用程序。
P.S: 這是源碼 source code
? 貓哥
微信群 ducafecat
往期
開源
GetX Quick Start
https://github.com/ducafecat/getx_quick_start
新聞客戶端
https://github.com/ducafecat/flutter_learn_news
strapi 手冊(cè)譯文
微信討論群 ducafecat
系列集合
譯文
https://ducafecat.tech/categories/%E8%AF%91%E6%96%87/
開源項(xiàng)目
https://ducafecat.tech/categories/%E5%BC%80%E6%BA%90/
Dart 編程語言基礎(chǔ)
https://space.bilibili.com/404904528/channel/detail?cid=111585
Flutter 零基礎(chǔ)入門
https://space.bilibili.com/404904528/channel/detail?cid=123470
Flutter 實(shí)戰(zhàn)從零開始 新聞客戶端
https://space.bilibili.com/404904528/channel/detail?cid=106755
Flutter 組件開發(fā)
https://space.bilibili.com/404904528/channel/detail?cid=144262
Flutter Bloc
https://space.bilibili.com/404904528/channel/detail?cid=177519
Flutter Getx4
https://space.bilibili.com/404904528/channel/detail?cid=177514
Docker Yapi
https://space.bilibili.com/404904528/channel/detail?cid=130578
