Flutterで、写真を撮影するフォームを作り、その撮影した写真をバックエンドであるPythonに送り、Pythonの画像加工の技術を使って、セピア色にするのを作っていきたいと思います。
エディターは、Android Studioを使っていきます。
Android StudioにFlutterの環境構築をするには、 こちらのサイトを参考にするといいです↓
https://note.com/qkuronekop/n/nb78b7c642d6a
Flutterの環境構築ができましたら、プロジェクトを作成していきます。
今回のプロジェクト名は、photoにします。
とりあえず、まずは、写真が撮影できるアプリを作成します。
実装では、以下のパッケージ
・camera: デバイス上のカメラを操作するのに必要
・path provider: 画像の保存場所を見つけてくれる
・path: 画像の保存先を作成してくれる
・video player: ビデオを再生してくれる
が必要となるので、コマンドで、
$ flutter pub get
$ flutter pub add path_provider
$ flutter pub add path
$ flutter pub add video_player
※ $マークは、コマンドライン(ターミナル)での入力を意味しているので、無視してください。
を打ってください。
android/app/build.gradleファイルのminSdkVersionを以下のように変更します。
android/app/build.gradle
plugins {
id "com.android.application"
id "kotlin-android"
id "dev.flutter.flutter-gradle-plugin"
}
def localProperties = new Properties()
def localPropertiesFile = rootProject.file('local.properties')
if (localPropertiesFile.exists()) {
localPropertiesFile.withReader('UTF-8') { reader ->
localProperties.load(reader)
}
}
def flutterVersionCode = localProperties.getProperty('flutter.versionCode')
if (flutterVersionCode == null) {
flutterVersionCode = '1'
}
def flutterVersionName = localProperties.getProperty('flutter.versionName')
if (flutterVersionName == null) {
flutterVersionName = '1.0'
}
android {
namespace "com.example.photo"
compileSdk flutter.compileSdkVersion
ndkVersion flutter.ndkVersion
compileOptions {
sourceCompatibility JavaVersion.VERSION_1_8
targetCompatibility JavaVersion.VERSION_1_8
}
kotlinOptions {
jvmTarget = '1.8'
}
sourceSets {
main.java.srcDirs += 'src/main/kotlin'
}
defaultConfig {
// TODO: Specify your own unique Application ID (https://developer.android.com/studio/build/application-id.html).
applicationId "com.example.photo"
// You can update the following values to match your application needs.
// For more information, see: https://docs.flutter.dev/deployment/android#reviewing-the-gradle-build-configuration.
- minSdkVersion flutter.minSdkVersion
+ minSdkVersion 21
targetSdkVersion flutter.targetSdkVersion
versionCode flutterVersionCode.toInteger()
versionName flutterVersionName
}
buildTypes {
release {
// TODO: Add your own signing config for the release build.
// Signing with the debug keys for now, so `flutter run --release` works.
signingConfig signingConfigs.debug
}
}
}
flutter {
source '../..'
}
dependencies {}
にします。
そして、カメラ機能を使う際に、許可を要求するための文言を追加します。
そのために、
ios/Runner/Info.plistを
ios/Runner/Info.plist
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
<dict>
<key>CADisableMinimumFrameDurationOnPhone</key>
<true/>
<key>CFBundleDevelopmentRegion</key>
<string>$(DEVELOPMENT_LANGUAGE)</string>
<key>CFBundleDisplayName</key>
<string>Photo</string>
<key>CFBundleExecutable</key>
<string>$(EXECUTABLE_NAME)</string>
<key>CFBundleIdentifier</key>
<string>$(PRODUCT_BUNDLE_IDENTIFIER)</string>
<key>CFBundleInfoDictionaryVersion</key>
<string>6.0</string>
<key>CFBundleName</key>
<string>photo</string>
<key>CFBundlePackageType</key>
<string>APPL</string>
<key>CFBundleShortVersionString</key>
<string>$(FLUTTER_BUILD_NAME)</string>
<key>CFBundleSignature</key>
<string>????</string>
<key>CFBundleVersion</key>
<string>$(FLUTTER_BUILD_NUMBER)</string>
<key>LSRequiresIPhoneOS</key>
<true/>
+ <key>NSCameraUsageDescription</key>
+ <string>撮影をするために、カメラ機能を使う必要があります。</string>
+ <key>NSMicrophoneUsageDescription</key>
+ <string>撮影をする際に、マイク機能を使う場合があります。</string>
<key>UIApplicationSupportsIndirectInputEvents</key>
<true/>
<key>UILaunchStoryboardName</key>
<string>LaunchScreen</string>
<key>UIMainStoryboardFile</key>
<string>Main</string>
<key>UISupportedInterfaceOrientations</key>
<array>
<string>UIInterfaceOrientationPortrait</string>
<string>UIInterfaceOrientationLandscapeLeft</string>
<string>UIInterfaceOrientationLandscapeRight</string>
</array>
<key>UISupportedInterfaceOrientations~ipad</key>
<array>
<string>UIInterfaceOrientationPortrait</string>
<string>UIInterfaceOrientationPortraitUpsideDown</string>
<string>UIInterfaceOrientationLandscapeLeft</string>
<string>UIInterfaceOrientationLandscapeRight</string>
</array>
</dict>
</plist>
というふうに変更します。
次に、lib/main.dartを、
lib/main.dart
import 'dart:io';
import 'package:camera/camera.dart';
import 'package:flutter/material.dart';
Future<void> main() async {
// Flutterのバインディングを初期化する。この関数を呼び出すことで、Flutterが完全に起動したことが保証される
WidgetsFlutterBinding.ensureInitialized();
// 使用可能なカメラを取得する非同期処理
final cameras = await availableCameras();
// 最初のカメラデバイスを取得（一般的には、デバイスに複数のカメラがある場合、最初に使うカメラを選択）
final firstCamera = cameras.first;
// 取得できているか確認
print(firstCamera);
// アプリケーションを実行する
runApp(MyApp(camera: firstCamera));
}
class MyApp extends StatelessWidget {
const MyApp({
Key? key,
required this.camera,
}) : super(key: key);
// カメラ情報（デバイスのカメラ）
final CameraDescription camera;
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'カメラ機能',
theme: ThemeData(),
home: TakePictureScreen(camera: camera),
);
}
}
// 写真撮影画面
class TakePictureScreen extends StatefulWidget {
const TakePictureScreen({
Key? key,
required this.camera, // 使用するカメラ情報を受け取る
}) : super(key: key);
// カメラ情報
final CameraDescription camera;
@override
TakePictureScreenState createState() => TakePictureScreenState();
}
class TakePictureScreenState extends State<TakePictureScreen> {
late CameraController _controller; // カメラの操作を管理するコントローラー
late Future<void> _initializeControllerFuture; // カメラの初期化を待つ
@override
void initState() {
super.initState();
// CameraControllerを初期化。使用するカメラと解像度を指定。
_controller = CameraController(
// 受け取ったカメラ情報を使用
widget.camera,
// カメラの解像度設定
ResolutionPreset.medium,
);
// カメラの初期化処理を開始し、その完了を待つ
_initializeControllerFuture = _controller.initialize();
}
@override
void dispose() {
// 画面が破棄される際にカメラコントローラーも破棄してリソースを解放
_controller.dispose();
super.dispose();
}
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: FutureBuilder<void>(
// カメラ初期化が完了するのを待つ
future: _initializeControllerFuture,
builder: (context, snapshot) {
if (snapshot.connectionState == ConnectionState.done) {
// 初期化が完了したらカメラプレビューを表示
return CameraPreview(_controller);
} else {
// 初期化中はローディングインジケーターを表示
return const CircularProgressIndicator();
}
},
),
),
// 写真を撮るためのボタン
floatingActionButton: FloatingActionButton(
onPressed: () async {
// 写真を撮る（非同期処理）
final image = await _controller.takePicture();
// 写真を撮った後、次の画面へ遷移（撮影した画像を表示）
await Navigator.of(context).push(
MaterialPageRoute(
builder: (context) => DisplayPictureScreen(imagePath: image.path),
fullscreenDialog: true,
),
);
},
child: const Icon(Icons.camera_alt),// カメラアイコン
),
);
}
}
// 撮影した写真を表示する画面
class DisplayPictureScreen extends StatelessWidget {
const DisplayPictureScreen({Key? key, required this.imagePath})
: super(key: key);
// 画像のファイルパス
final String imagePath;
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: const Text('この写真でいいですか？')),
body: Center(
// 画面中央に撮影した画像を表示
child: Image.file(File(imagePath))),
);
}
}
にします。
それでは、さっそくテストをしてみましょう。
実機は、お使いのパソコンとスマホを使い、下のような専用のコードで、同期させます。
今回は、iphoneを使います。
そして、この開発ツールとしてXCodeを使います。
XCodeの使い方やテストをする際のスマホの環境設定については、
こちらのサイトを参考にしてみてください↓
FlutterやCocoaPodsの依存関係の影響で、テストをする際にエラーが発生する場合があります。
その場合は、
ターミナルで、
$ flutter clean
$ flutter pub get
と入力し、Flutterのキャッシュと依存関係を再取得します。
次に、iOSの依存関係を管理する CocoaPods のインストールを確認します。
CocoaPodsがインストールされていない場合、インストールする方法を以下に記述します。
前提条件
・macOSがインストールされていること。
・Xcodeがインストールされていること。
CocoaPodsのインストール手順
Homebrewを使ったインストール（推奨） HomebrewはmacOS向けのパッケージマネージャーで、CocoaPodsもHomebrewを使ってインストールできます。
もしHomebrewがインストールされていない場合は、まずHomebrewをインストールしてください。
$ /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"
次に、Homebrewを使ってCocoaPodsをインストールします。
$ brew install cocoapods
インストール後、podコマンドが使えるようになります。インストールが成功したことを確認するために、次のコマンドを実行してバージョンを確認できます。
$ pod --version
バージョン番号が表示されれば、インストールは正常に完了しています。
もしHomebrewを使わずにインストールしたい場合は、以下のコマンドを実行します。
sudo gem install cocoapods
インストール後、以下のコマンドでバージョンを確認できます。
$ pod --version
これでpodコマンドが使えるようになります。
CocoaPodsの初期設定
インストール後、最初にCocoaPodsをセットアップするために、以下のコマンドを実行します。
$ pod setup
これにより、CocoaPodsの依存関係を管理するためのローカルリポジトリが作成されます。この操作は初回のみに必要です。
CocoaPodsのキャッシュをクリアしてから、pod install を再度実行してみてください。
やり方は、
ターミナルで、
$ cd ios
$ pod cache clean --all
$ pod install
というコマンドを入力します。
Xcodeの設定を確認
Xcodeの設定で、iOSプロジェクトが適切にビルドされるか確認します。
Xcodeで ios/Runner.xcworkspace を開きます。
$ open ios/Runner.xcworkspace
※ iosディレクトリ内にいる場合は、ios/の部分は入りません。
Xcodeでプロジェクトをクリーンビルドします。
メニューから Product > Clean Build Folder を選択。
その後、Product > Build を実行します。
これで、エラーが解決されるかと思います。
下の画面のように、
(Build Succeeded)という表示が出れば、成功です。
そうなりましたら、
ターミナルで、
$ flutter run
と打ち、
というようなメッセージが出れば、成功です。
こうしたメッセージが出ると、
パソコンと同期しているスマホの画面が、
このように、スマホに映し出され、右下のカメラボタンを押すと、
という画面に切り替われば成功です。
これが第一段階です。
これを発展させて、Djangoと連携して、ノスタルジックなセピア色の写真に変えるアプリにしていきます。
今度は、以下のパッケージが必要になります。
・image_gallery_saver: アプリ内で撮影した画像やダウンロードした画像を簡単にデバイスのギャラリー（画像フォルダ）に保存してくれます。
・http: Web サーバーとの通信や、外部 API とのやり取りが簡単に行えるようにする。
$ flutter pub add image_gallery_saver
$ flutter pub add http
と、コマンドで打ってください。
その後に、
ios/Runner/info.plistに、以下の文を追記します。
ios/Runner/info.plist
<key>NSCameraUsageDescription</key>
<string>撮影をするために、カメラ機能を使う必要があります。</string>
<key>NSMicrophoneUsageDescription</key>
<string>撮影をする際に、マイク機能を使う場合があります。</string>
+ <key>NSPhotoLibraryAddUsageDescription</key>
+ <string>撮影した写真を保存します</string>
<key>UIApplicationSupportsIndirectInputEvents</key>
<true/>
これらの記載をすると、
アプリを起動させた時、
というメッセージが出ます。
こちらのターミナルで、
アプリをまとめるディレクトリを作成していきます。
今回は、Cameraというアプリにしたいので、
$ mkdir Camera
と入力し、
$ cd Camera
で、Cameraディレクトリに入り、PythonのフレームワークであるDjangoをインストールします。
Djangoのインストールの仕方は、こちらのサイトを参考にするといいです。↓
Pythonで、撮影した写真を加工するためのファイルを作りたいので、
Djangoアプリを作成するために、以下のコマンドを入力します。
今回は、pythonという名前のプロジェクトを作成します。
$ django-admin startproject python
すると、ディレクトリ構造は、
python
├── manage.py
└── python
├── __init__.py
├── asgi.py
├── settings.py
├── urls.py
└── wsgi.py
となります。
そして、この中にアプリケーションを作成します。
撮影した写真を加工するprocessというアプリケーションを作りたいので、
アプリケーションを作成するには、manage.pyと同じディレクトリに入り、
$python manage.py startapp process
というコマンドを打ってください。
すると、ディレクトリ構造は、
python
├── manage.py
├── process
│ ├── __init__.py
│ ├── admin.py
│ ├── apps.py
│ ├── migrations
│ │ └── __init__.py
│ ├── models.py
│ ├── tests.py
│ └── views.py
└── python
├── __init__.py
├── __pycache__
│ ├── __init__.cpython-311.pyc
│ └── settings.cpython-311.pyc
├── asgi.py
├── settings.py
├── urls.py
└── wsgi.py
という構造に変わります。
パスを通すために、python/python/urls.pyに、
python/python/urls.py
"""processed_photo URL Configuration
The `urlpatterns` list routes URLs to views. For more information please see:
https://docs.djangoproject.com/en/4.1/topics/http/urls/
Examples:
Function views
1. Add an import: from my_app import views
2. Add a URL to urlpatterns: path('', views.home, name='home')
Class-based views
1. Add an import: from other_app.views import Home
2. Add a URL to urlpatterns: path('', Home.as_view(), name='home')
Including another URLconf
1. Import the include() function: from django.urls import include, path
2. Add a URL to urlpatterns: path('blog/', include('blog.urls'))
"""
from django.contrib import admin
from django.urls import path, include
urlpatterns = [
path("admin/", admin.site.urls),
path("process/", include("process.urls")),
]
に変更。
そして、processディレクトリ内に、urls.pyファイルを作り、パスを通すために、以下のコードを書きます。
python/process/urls.py
from django.urls import path
from process import views
urlpatterns = [
path("request/", views.CameraRequest, name="camera_request"),
]
processディレクトリの中のviews.pyに撮影した写真を送り、セピア色に加工するためのコードを書いていきます。
python/process/views.py
from django.http import HttpResponse, HttpResponseBadRequest
from django.views.decorators.csrf import csrf_exempt
from PIL import Image
import io
def processed_with_sepia(image_file):
# セピア色にする加工
RGBImage = Image.open(image_file).convert("RGB")
width, height = RGBImage.size
sepia_image = Image.new("RGB", (width, height))
for y in range(height):
for x in range(width):
r,g,b = RGBImage.getpixel((x, y))
# セピア調の色合いに変化
new_r = int(r * 0.393 + g * 0.769 + b * 0.189)
new_g = int(r * 0.349 + g * 0.686 + b * 0.168)
new_b = int(r * 0.272 + g * 0.534 + b * 0.131)
# RGB値が255を超えないように調整
new_r = min(new_r, 255)
new_g = min(new_g, 255)
new_b = min(new_b, 255)
sepia_image.putpixel((x,y), (new_r, new_g, new_b))
return sepia_image
@csrf_exempt
def CameraRequest(request):
if request.method == 'POST' and request.FILES.get('photo'):
image_file = request.FILES.get('photo')
if image_file:
# デバッグ情報を表示するためにprint文を追加
print('デバッグのコード:受け取った画像のファイル名 = ', image_file.name)
# 画像を受け取って処理するコードを追加します
processed_image = processed_with_sepia(image_file)
with io.BytesIO() as output:
processed_image.save(output,format='PNG')
processed_image_binary = output.getvalue()
# レスポンスとして処理済みの画像を返します
response = HttpResponse(processed_image_binary, content_type = "image/png")
response['Content-Disposition'] = 'attachment; filename="photo.png"'
return response
return HttpResponseBadRequest()
この作業が終わると、撮影した写真をFlutterからDjangoに渡すために、
lib/main.dartのコードを書き換えていきます。
FlutterからDjangoに写真を送る際、下の画像のように、
反時計回りに90度傾いた状態で、渡されてしまいます。
バックエンドであるDjango側でその画像を元の傾きに戻す処理を行うと、
画像が見切れてしまうため、
フロントエンドであるFlutter側で再度、元の傾きに戻す処理を行います。
このことを念頭に、Android Studioに戻り、
photoプロジェクト内の
lib/main.dartを以下のように書き換えます。
lib/main.dart
import 'dart:io';
import 'dart:math';
import 'dart:typed_data';
import 'dart:ui';
import 'package:camera/camera.dart';
import 'package:flutter/material.dart';
import 'package:http/http.dart' as http;
import 'dart:convert';
import 'package:image_gallery_saver/image_gallery_saver.dart';
Future <void> main() async {
// Flutterのバインディングを初期化する。この関数を呼び出すことで、Flutterが完全に起動したことが保証される
WidgetsFlutterBinding.ensureInitialized();
// 使用可能なカメラを取得する非同期処理
final cameras = await availableCameras();
// 最初のカメラデバイスを取得（一般的には、デバイスに複数のカメラがある場合、最初に使うカメラを選択）
final firstCamera = cameras.first;
runApp(MyApp(camera: firstCamera));
}
class MyApp extends StatelessWidget {
const MyApp({
Key? key,
required this.camera,
}) : super(key: key);
final CameraDescription camera;
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'カメラ機能',
theme: ThemeData(),
home: TakePictureScreen(camera: camera),
);
}
}
class TakePictureScreen extends StatefulWidget {
const TakePictureScreen({
super.key,
required this.camera,
});
final CameraDescription camera;
@override
TakePictureScreenState createState() => TakePictureScreenState();
}
class TakePictureScreenState extends State<TakePictureScreen> {
late CameraController _controller;
late Future<void> _initializeControllerFuture;
@override
void initState() {
super.initState();
_controller = CameraController(
// 受け取ったカメラ情報を使用
widget.camera,
// 解像度を定義
ResolutionPreset.medium,
);
// カメラの初期化処理を開始し、その完了を待つ
_initializeControllerFuture = _controller.initialize();
}
@override
void dispose() {
// 画面が破棄される際にカメラコントローラーも破棄してリソースを解放
_controller.dispose();
super.dispose();
}
Future<void> _sendPhoto(File photo) async {
var request = http.MultipartRequest(
'POST',
Uri.parse('http://IPアドレス(例:0.0.0.0:8000/process/request/'),);
request.files.add(http.MultipartFile.fromBytes('photo', await photo.readAsBytes(), filename: 'photo.png',));
try {
var response = await request.send();
if (response.statusCode == 200) {
var contentBytes = await response.stream.toBytes();
var base64Image = base64Encode(contentBytes);
//表示用の画面に移動
await Navigator.of(context).push(
MaterialPageRoute(
builder: (context) => DisplayProcessedPictureScreen(imagePath: 'data:image/png;base64,$base64Image'),
fullscreenDialog : true,
),
);
} else {
// 失敗時の処理
print('デバッグのコード:レスポンスステータスコード = ${response.statusCode}');
}
} catch (e) {
// エラー時の処理
print('デバッグのコード: エラーが発生しました: $e');
}
}
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
// FutureBuilderで初期化を待ってからプレビューを表示 (それまではインジケータを表示)
child: FutureBuilder<void>(
future: _initializeControllerFuture,
builder: (context, snapshot) {
if (snapshot.connectionState == ConnectionState.done) {
return CameraPreview(_controller);
} else {
return const CircularProgressIndicator();
}
},
),
),
floatingActionButton: FloatingActionButton(
onPressed: () async {
// 写真を撮る
final image = await _controller.takePicture();
await _sendPhoto(File(image.path));
// 表示用の画面に遷移
await Navigator.of(context).push(
MaterialPageRoute(
builder: (context) => DisplayPictureScreen(imagePath: image.path),
fullscreenDialog: false,
),
);
},
child: const Icon(Icons.camera_alt),
),
);
}
}
// 撮影した写真を表示する画面
class DisplayPictureScreen extends StatelessWidget {
const DisplayPictureScreen({super.key, required this.imagePath}) ;
final String imagePath;
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
backgroundColor: Colors.blue,
title: const Text(
'通常',
style: TextStyle(
color: Colors.white, // 文字の色を白色に設定
fontWeight: FontWeight.bold, // 文字を太字
),
),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Image.file(File(imagePath)),
SizedBox(
height: 20,
width: 80),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
ElevatedButton(
onPressed: () {
// 「保存する」ボタンを押した時の処理
_saveImage(context, imagePath);
},
child: Text(
'保存する',
style: TextStyle(
color: Colors.white, //テキストを白字に設定
fontWeight: FontWeight.bold, //テキストを太字
),
),
style: ButtonStyle(
backgroundColor: MaterialStateProperty.all<Color>(Colors.blue),
)
),
SizedBox(
height: 20,
width: 80),
ElevatedButton(
onPressed: () {
// 「撮り直す」ボタンが押された時の処理
Navigator.of(context).pop();
},
child: Text(
'撮り直す',
style: TextStyle(
color: Colors.white, //テキストを白字に設定
fontWeight: FontWeight.bold, //テキストを太字
),
),
style: ButtonStyle(
backgroundColor: MaterialStateProperty.all<Color>(Colors.green),
)
),
],
),
],
),
),
);
}
Future<void> _saveImage(BuildContext context, String imagePath) async {
try {
final result =await ImageGallerySaver.saveFile(imagePath);
if (result != null) {
ScaffoldMessenger.of(context).showSnackBar(
SnackBar(content: Text('画像が保存されました')),
);
} else {
ScaffoldMessenger.of(context).showSnackBar(
SnackBar(content: Text('画像の保存に失敗しました')),
);
}
} catch (e) {
print('画像の保存時にエラーが発生しました: $e');
ScaffoldMessenger.of(context).showSnackBar(
SnackBar(content: Text('画像の保存時にエラーが発生しました')),
);
}
}
}
// 処理後の画像を受け取る
class DisplayProcessedPictureScreen extends StatefulWidget {
final String imagePath;
const DisplayProcessedPictureScreen({super.key, required this.imagePath});
@override
DisplayProcessedPictureScreenState createState() =>
DisplayProcessedPictureScreenState();
}
class DisplayProcessedPictureScreenState extends State<DisplayProcessedPictureScreen> {
Future<http.Response>? _fetchImageFuture;
@override
void initState() {
super.initState();
_fetchImage();
}
Future<void> _fetchImage() async {
final base64Image = widget.imagePath
.split(',')
.last;
final decodedBytes = base64Decode(base64Image);
setState(() {
_fetchImageFuture =
Future.value(http.Response.bytes(decodedBytes, 200, headers: {
HttpHeaders.contentTypeHeader: 'image/png',
}));
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
backgroundColor: Colors.redAccent,
title: const Text(
'ノスタルジック',
style: TextStyle(
color: Colors.white, // 文字の色を白に設定
fontWeight: FontWeight.bold, // 文字を太字
))),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
FutureBuilder<http.Response>(
future: _fetchImageFuture,
builder: (context, snapshot) {
if (snapshot.hasData) {
final response = snapshot.data!;
if (response.statusCode == 200) {
final responseData = response.bodyBytes;
return Transform.rotate(
angle: 90 * pi /180,
child:// 反時計回りに90度回転
Image.memory(
responseData,
fit: BoxFit
.contain,
), // 画像をウィジェット内に適切に表示させるために適応させるfitパラメータを追加
alignment: Alignment.center, //回転の中心を設定
);
} else {
// レスポンスが不正なステイタスコードを返した場合のエラーメッセージ
return Text('画像の取得中にエラーが発生しました。');
}
}
return const CircularProgressIndicator();
},
),
SizedBox(height: 80),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
ElevatedButton(
onPressed: () {
// 「保存する」ボタンを押した時の処理
_savedImage(context, widget.imagePath);
},
child: Text(
'保存する',
style: TextStyle(
color: Colors.white, // テキストを白字に設定
fontWeight: FontWeight.bold, // テキストを太字
),
),
style: ButtonStyle(
backgroundColor: MaterialStateProperty.all<Color>(Colors.blue), //ボタンの背景色を青色に設定
),
),
],
),
SizedBox(height: 10),
ElevatedButton(
onPressed: () {
// 「撮り直す」ボタンが押された時の処理
Navigator.of(context).pop();
},
child:Text(
'破棄',
style: TextStyle(
color: Colors.white, // テキストを白色に設定
fontWeight: FontWeight.bold, // テキストを太字
),
),
style: ButtonStyle(
backgroundColor: MaterialStateProperty.all<Color>(Colors.red), //ボタンの背景色を赤色に設定
)
),
],
),
),
);
}
Future<void> _savedImage(BuildContext context, String imagePath) async {
try {
final base64Image = widget.imagePath
.split(',')
.last;
final decodedBytes = base64Decode(base64Image);
final rotatedBytes = await _rotatedImage(decodedBytes, 90);
// 画像を保存
final result = await ImageGallerySaver.saveImage(rotatedBytes);
if (result != null) {
ScaffoldMessenger.of(context).showSnackBar(
SnackBar(content: Text('画像が保存されました')),
);
} else {
ScaffoldMessenger.of(context).showSnackBar(
SnackBar(content: Text('画像の保存に失敗しました')),
);
}
} catch (e) {
print('画像の保存時にエラーが発生しました: $e');
ScaffoldMessenger.of(context).showSnackBar(
SnackBar(content: Text('画像の保存時にエラーが発生しました')),
);
}
}
Future<Uint8List> _rotatedImage(Uint8List imageBytes, double angle) async {
// 画像をデコード
final image = await decodeImageFromList(imageBytes);
// 回転後のサイズを計算
final double radians = angle * ( pi / 180);
final double sine = sin(radians);
final double cosin = cos(radians);
final double newWidth = (image.width * cosin + image.height * sine).abs();
final double newHeight = (image.width * sine + image.height * cosin).abs();
// 新しいサイズのキャンバスを作成
final recorder = PictureRecorder();
final canvas = Canvas(recorder, Rect.fromPoints(Offset(0.0,0.0), Offset(newWidth, newHeight)));
// 画像を描画して回転
canvas.translate(newWidth / 2, newHeight / 2);
canvas.rotate(radians);
canvas.drawImage(image, Offset(-image.width / 2, -image.height / 2), Paint());
// キャンバスを終了し、画像を取得
final picture = recorder.endRecording();
final img = await picture.toImage(newWidth.toInt(), newHeight.toInt());
final byteData = await img.toByteData(format: ImageByteFormat.png);
return byteData!.buffer.asUint8List();
}
}
最終的なinfo.plistは、
info.plist
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
<dict>
<key>CADisableMinimumFrameDurationOnPhone</key>
<true/>
<key>CFBundleDevelopmentRegion</key>
<string>$(DEVELOPMENT_LANGUAGE)</string>
<key>CFBundleDisplayName</key>
<string>Take Photo</string>
<key>CFBundleExecutable</key>
<string>$(EXECUTABLE_NAME)</string>
<key>CFBundleIdentifier</key>
<string>$(PRODUCT_BUNDLE_IDENTIFIER)</string>
<key>CFBundleInfoDictionaryVersion</key>
<string>6.0</string>
<key>CFBundleName</key>
<string>photo</string>
<key>CFBundlePackageType</key>
<string>APPL</string>
<key>CFBundleShortVersionString</key>
<string>$(FLUTTER_BUILD_NAME)</string>
<key>CFBundleSignature</key>
<string>????</string>
<key>CFBundleVersion</key>
<string>$(FLUTTER_BUILD_NUMBER)</string>
<key>LSRequiresIPhoneOS</key>
<true/>
<key>NSCameraUsageDescription</key>
<string>撮影をするために、カメラ機能を使う必要があります。</string>
<key>NSMicrophoneUsageDescription</key>
<string>撮影をする際に、マイク機能を使う場合があります。</string>
+ <key>NSPhotoLibraryAddUsageDescription</key>
+ <string>撮影した写真を保存します</string>
<key>UIApplicationSupportsIndirectInputEvents</key>
<true/>
<key>UILaunchStoryboardName</key>
<string>LaunchScreen</string>
<key>UIMainStoryboardFile</key>
<string>Main</string>
<key>UISupportedInterfaceOrientations</key>
<array>
<string>UIInterfaceOrientationPortrait</string>
<string>UIInterfaceOrientationLandscapeLeft</string>
<string>UIInterfaceOrientationLandscapeRight</string>
</array>
<key>UISupportedInterfaceOrientations~ipad</key>
<array>
<string>UIInterfaceOrientationPortrait</string>
<string>UIInterfaceOrientationPortraitUpsideDown</string>
<string>UIInterfaceOrientationLandscapeLeft</string>
<string>UIInterfaceOrientationLandscapeRight</string>
</array>
</dict>
</plist>
となり、
pubspec.yamlは、
pubspec.yaml
name: photo
description: "A new Flutter project."
# The following line prevents the package from being accidentally published to
# pub.dev using `flutter pub publish`. This is preferred for private packages.
publish_to: 'none' # Remove this line if you wish to publish to pub.dev
# The following defines the version and build number for your application.
# A version number is three numbers separated by dots, like 1.2.43
# followed by an optional build number separated by a +.
# Both the version and the builder number may be overridden in flutter
# build by specifying --build-name and --build-number, respectively.
# In Android, build-name is used as versionName while build-number used as versionCode.
# Read more about Android versioning at https://developer.android.com/studio/publish/versioning
# In iOS, build-name is used as CFBundleShortVersionString while build-number is used as CFBundleVersion.
# Read more about iOS versioning at
# https://developer.apple.com/library/archive/documentation/General/Reference/InfoPlistKeyReference/Articles/CoreFoundationKeys.html
# In Windows, build-name is used as the major, minor, and patch parts
# of the product and file versions while build-number is used as the build suffix.
version: 1.0.0+1
environment:
sdk: '>=3.3.4 <4.0.0'
# Dependencies specify other packages that your package needs in order to work.
# To automatically upgrade your package dependencies to the latest versions
# consider running `flutter pub upgrade --major-versions`. Alternatively,
# dependencies can be manually updated by changing the version numbers below to
# the latest version available on pub.dev. To see which dependencies have newer
# versions available, run `flutter pub outdated`.
dependencies:
flutter:
sdk: flutter
# The following adds the Cupertino Icons font to your application.
# Use with the CupertinoIcons class for iOS style icons.
cupertino_icons: ^1.0.6
camera: ^0.11.0+2
path_provider: ^2.1.5
path: ^1.9.0
video_player: ^2.9.2
image_gallery_saver: ^2.0.3
http: ^1.2.2
dev_dependencies:
flutter_test:
sdk: flutter
# The "flutter_lints" package below contains a set of recommended lints to
# encourage good coding practices. The lint set provided by the package is
# activated in the `analysis_options.yaml` file located at the root of your
# package. See that file for information about deactivating specific lint
# rules and activating additional ones.
flutter_lints: ^3.0.0
# For information on the generic Dart part of this file, see the
# following page: https://dart.dev/tools/pub/pubspec
# The following section is specific to Flutter packages.
flutter:
# The following line ensures that the Material Icons font is
# included with your application, so that you can use the icons in
# the material Icons class.
uses-material-design: true
# To add assets to your application, add an assets section, like this:
# assets:
# - images/a_dot_burr.jpeg
# - images/a_dot_ham.jpeg
# An image asset can refer to one or more resolution-specific "variants", see
# https://flutter.dev/assets-and-images/#resolution-aware
# For details regarding adding assets from package dependencies, see
# https://flutter.dev/assets-and-images/#from-packages
# To add custom fonts to your application, add a fonts section here,
# in this "flutter" section. Each entry in this list should have a
# "family" key with the font family name, and a "fonts" key with a
# list giving the asset and other descriptors for the font. For
# example:
# fonts:
# - family: Schyler
# fonts:
# - asset: fonts/Schyler-Regular.ttf
# - asset: fonts/Schyler-Italic.ttf
# style: italic
# - family: Trajan Pro
# fonts:
# - asset: fonts/TrajanPro.ttf
# - asset: fonts/TrajanPro_Bold.ttf
# weight: 700
#
# For details regarding fonts from package dependencies,
# see https://flutter.dev/custom-fonts/#from-packages
というコードになっていれば、OKです。
では、この作成したphotoプロジェクトを
先ほど、作成したCameraディレクトリ内にコピーしていきます。
なので、photoプロジェクトのパスをAndroid Studio内のターミナルで、
$ pwd
と打ち、取得します。
※ 表示されたメッセージがphotoプロジェクトのパスになります。
そして、次に、Cameraディレクトリ内で、同じく、
$ pwd
と打ち、
$ cp -r [photoプロジェクトのパス] [Cameraディレクトリのパス/photo]
とコマンドで入力してください。
このようなディレクトリ構造になっていれば大丈夫です。
Camera
├── photo
└── python
└── process
より詳しい全体的なディレクトリ構造は、
Camera
├── python
│ ├── Dockerfile
│ ├── manage.py
│ ├── process
│ │ ├── __init__.py
│ │ ├── admin.py
│ │ ├── apps.py
│ ├── migrations
│ │ │ └── __init__.py
│ │ ├── models.py
│ │ ├── tests.py
│ │ ├── urls.py
│ │ └── views.py
│ └── python
│ ├── __init__.py
│ ├── __pycache__
│ │ ├── __init__.cpython-311.pyc
│ │ └── settings.cpython-311.pyc
│ ├── asgi.py
│ ├── settings.py
│ ├── urls.py
│ └── wsgi.py
└── photo # Flutterアプリケーション
となっていれば大丈夫です。
では、photoディレクトリ内で、
$ flutter run
を実行してみましょう。
もし、
このような画面が出てきてしまったら、
下の画面のように、XCodeのSettings項目を押し、
Components内にある
エラーメッセージで表示している必要としているデバイス(僕の場合は、iOS 18.2)を選び、「GET」ボタンを押してください。
これをすることで、エラーが解消されるかと思います。
では、これまでに書いたコードが動くかどうかテストをしていきます。
FlutterとDjangoは、手動で動かしていきます。
撮影した写真を加工するために、まずは、Djangoのサーバーを動かしていきます。
Djangoを動かす前に、
サーバーのCORS設定を確認（特にローカル開発環境）
モバイルデバイスからのリクエストをサーバーが受け入れるためには、サーバーのCORS（Cross-Origin Resource Sharing）設定が適切に設定されている必要があります。
特に、FlutterアプリがAndroidやiOS端末で実行されている場合、サーバー側でCORSが適切に設定されていないと、リクエストが拒否されることがあります。
例えば、DjangoでCORSを許可するには、django-cors-headersをインストールして設定します。
$ pip install django-cors-headers
次に、settings.pyで設定します。
python/python/settings.py
INSTALLED_APPS = [
...
'corsheaders',
...
]
MIDDLEWARE = [
...
'corsheaders.middleware.CorsMiddleware',
...
]
# 必要に応じて設定（すべてのドメインからのリクエストを許可する場合）
CORS_ALLOW_ALL_ORIGINS = True
もし、下のようなエラーが出た場合は、
Pythonのsslモジュールが利用できないことが原因です。sslモジュールは、SSL/TLS接続を扱うために必要ですが、現在のPython環境ではこれが有効になっていない可能性があります。
- Pythonのsslモジュールのインストールを確認
この問題は、Pythonをインストールする際にsslサポートが無効化された場合に発生します。これを解決するために、次の手順を試してみてください。
- pyenvの再インストール
PythonのSSLサポートを有効にするために、pyenvでPythonを再インストールする際に、opensslを適切にリンクさせてインストールします。次のコマンドを試してください：
$ env PATH="$(brew --prefix openssl@3)/bin:$PATH" pyenv install 3.11.4
openssl@3を正しくリンクさせてPythonをインストールします。これにより、PythonがSSLモジュールを適切に利用できるようになります。
- pyenvのPythonバージョンを再設定
インストールが完了したら、pyenvでインストールしたPythonバージョンを使用するように設定します。
$ pyenv global 3.11.4
- Pythonの依存関係の再インストール
SSLモジュールが有効になったら、必要なパッケージを再インストールします。
$ pip install --upgrade pip
$ pip install django-cors-headers
これで、pipが正しくHTTPS経由でパッケージをダウンロードできるようになるはずです。
これらを踏まえて、python/python/settings.pyの全体的な内容は、
python/python/settings.py
"""
Django settings for python project.
Generated by 'django-admin startproject' using Django 4.2.2.
For more information on this file, see
https://docs.djangoproject.com/en/4.2/topics/settings/
For the full list of settings and their values, see
https://docs.djangoproject.com/en/4.2/ref/settings/
"""
from pathlib import Path
import os
# Build paths inside the project like this: BASE_DIR / 'subdir'.
BASE_DIR = Path(__file__).resolve().parent.parent
# Quick-start development settings - unsuitable for production
# See https://docs.djangoproject.com/en/4.2/howto/deployment/checklist/
# SECURITY WARNING: keep the secret key used in production secret!
SECRET_KEY = 'django-insecure-uvw0i=(例:########################)'
# SECURITY WARNING: don't run with debug turned on in production!
DEBUG = True
ALLOWED_HOSTS = [IPアドレス(例:'0.0.0.0')]
# Application definition
INSTALLED_APPS = [
+ 'corsheaders',
'django.contrib.admin',
'django.contrib.auth',
'django.contrib.contenttypes',
'django.contrib.sessions',
'django.contrib.messages',
'django.contrib.staticfiles',
]
MIDDLEWARE = [
'django.middleware.security.SecurityMiddleware',
'django.contrib.sessions.middleware.SessionMiddleware',
+ 'corsheaders.middleware.CorsMiddleware',
'django.middleware.common.CommonMiddleware',
'django.middleware.csrf.CsrfViewMiddleware',
'django.contrib.auth.middleware.AuthenticationMiddleware',
'django.contrib.messages.middleware.MessageMiddleware',
'django.middleware.clickjacking.XFrameOptionsMiddleware',
]
ROOT_URLCONF = 'python.urls'
TEMPLATES = [
{
'BACKEND': 'django.template.backends.django.DjangoTemplates',
'DIRS': [],
'APP_DIRS': True,
'OPTIONS': {
'context_processors': [
'django.template.context_processors.debug',
'django.template.context_processors.request',
'django.contrib.auth.context_processors.auth',
'django.contrib.messages.context_processors.messages',
],
},
},
]
WSGI_APPLICATION = 'python.wsgi.application'
# Database
# https://docs.djangoproject.com/en/4.2/ref/settings/#databases
DATABASES = {
'default': {
'ENGINE': 'django.db.backends.sqlite3',
'NAME': BASE_DIR / 'db.sqlite3',
}
}
# Password validation
# https://docs.djangoproject.com/en/4.2/ref/settings/#auth-password-validators
AUTH_PASSWORD_VALIDATORS = [
{
'NAME': 'django.contrib.auth.password_validation.UserAttributeSimilarityValidator',
},
{
'NAME': 'django.contrib.auth.password_validation.MinimumLengthValidator',
},
{
'NAME': 'django.contrib.auth.password_validation.CommonPasswordValidator',
},
{
'NAME': 'django.contrib.auth.password_validation.NumericPasswordValidator',
},
]
# Internationalization
# https://docs.djangoproject.com/en/4.2/topics/i18n/
LANGUAGE_CODE = 'en-us'
TIME_ZONE = 'UTC'
USE_I18N = True
USE_TZ = True
# Static files (CSS, JavaScript, Images)
# https://docs.djangoproject.com/en/4.2/howto/static-files/
STATIC_URL = 'static/'
# Default primary key field type
# https://docs.djangoproject.com/en/4.2/ref/settings/#default-auto-field
DEFAULT_AUTO_FIELD = 'django.db.models.BigAutoField'
+ # 必要に応じて設定(全てのドメインからのリクエストを許可する場合)
+ CORS_ALLOW_ALL_ORIGINS = True
に変わります。
では、Cameraディレクトリ内のpython(manage.pyがある)ディレクトリ内で、
$ python manage.py runserver IPアドレス(例:0.0.0.0:8000)
というコマンドを打ってください。
上のようなメッセージが、出れば成功です。
それでは、スマホとパソコンをコードで同期してください。
次は、フロントエンドであるFlutterを動かしていきたいので、photoディレクトリ内で、
$ flutter run
とコマンドを打ってください。
立ち上がるまでに、時間がかかりますが、
上のようなメッセージが出れば成功です。
すると、同期したスマホの画面が切り替わり、
という画面に変わります。
そして、また、カメラボタンを押すと、
今度は、上のような画面が現れるかと思います。
この画像に変われば、Djangoとの通信ができています。
そして、「保存する」ボタンを押すと、
というメッセージが出ます。
そして、写真アルバムを見てみると、
ちゃんと保存されていますね。
次に、「破棄」ボタンを押すと、
加工をしていない画面に遷移します。
こちらも、「保存する」ボタンを押すと、
というメッセージが出ます。
また、写真アルバムを確認すると、
こちらもちゃんと保存されています。
そして、「撮り直す」ボタンを押すと、
また、撮影画面に戻ります。
ここまでできれば、成功です。
これで完成です。
ここまでの工程は、Githubに上げておきます↓
もし、加工する写真をもっと赤味を強くしたり、青みがかったりしたい場合は、
python/process/views.pyの
new_r や new_g、new_bの数値を変えて、お好みの数値に設定してみてください。