Python
 Computer >> コンピューター >  >> プログラミング >> Python

Djangoで実現するクライアント側の画像ズーム・回転機能の実装方法

Webアプリケーションを開発していると、アップロードされた画像をユーザー側で回転したり拡大縮小（ズーム）したりしたい場面があります。そんなときに役立つのが、クライアント側で動作する画像ズーム・回転ライブラリです。HTMLファイルにjQuery関連のJSとCSSを読み込むだけで、ズームや回転の機能を簡単に追加できます。

この記事では、django-client-side-image-croppingライブラリを使って、Djangoアプリケーションに画像のクロップ（トリミング）・ズーム・回転機能を実装する手順を解説します。

事前準備

まずDjangoプロジェクトとアプリを作成し、URL設定などの基本的なセットアップを行います。忘れずに作成したアプリをINSTALLED_APPSに追加しておきましょう。

続いて、以下のコマンドでdjango-client-side-image-croppingライブラリをインストールします。

pip install django-client-side-image-cropping

settings.pyに次の1行を追加します。

INSTALLED_APPS += ['client_side_image_cropping']

ここでは、モジュールをアプリとして登録するシンプルな設定を行っています。

実装例

models.py

モデルにはImageFieldを持たせます。以下のように記述してください。

from django.db import models

# Create your models here.
class Data(models.Model):
    image = models.ImageField(upload_to='myimages/')

これで画像フィールドを持つモデルの準備が整いました。あわせてsettings.pyでMEDIA_ROOTの設定も行っておきましょう。

urls.py

from django.urls import path
from . import views
from django.conf import settings
from django.conf.urls.static import static

urlpatterns = [
    path('', views.home, name="home"),
]
urlpatterns += static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)

メディアファイルを配信するための基本的なmedia url設定です。

views.py

from django.shortcuts import render
from django import forms
from .models import Data
from client_side_image_cropping import ClientsideCroppingWidget

# Create your views here.
class DataForm(forms.ModelForm):
    class Meta:
        model = Data
        fields = "__all__"
        widgets = {
            'image': ClientsideCroppingWidget(
                width=400,
                height=600,
                preview_width=100,
                preview_height=150,
            )
        }

def home(request):
    if request.method == "POST":
        form = DataForm(request.POST, request.FILES)
        if form.is_valid():
            form.save()
    form = DataForm()
    return render(request, 'home.html', {"form": form})

ここではシンプルなモデルフォームを作成しました。モデルフォームなので、画像フィールドに対してクロップ用ウィジェット（ClientsideCroppingWidget）を指定しています。width／heightで出力サイズを、preview_width／preview_heightでプレビュー表示のサイズをそれぞれ制御できます。

home.html

{% load static %}
{% load cropping %}
{% load thumbnail %}
<!DOCTYPE html>
<html>
    <head>
        <title>TUT</title>
        <link rel="stylesheet" href="{% static "client_side_image_cropping/cropping.css" %}">
        <link rel="stylesheet" href="{% static "client_side_image_cropping/cropping_widget.css" %}">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
        <script src="{% static "client_side_image_cropping/croppie.min.js" %}"></script>
        <script src="{% static "client_side_image_cropping/cropping_widget.js" %}"></script>
    </head>
    <body>
        <h2>HI</h2>
        <form method="post" enctype="multipart/form-data">
            {% csrf_token %}
            {{ form.as_p }}
            <input type="submit" value="Save"/>
        </form>
    </body>
</html>

フロントエンド側では、必要なjQueryとスタイルシートを読み込み、入力を受け付けるフォームを描画しています。ポイントはformタグのenctypeに「multipart/form-data」を指定することです。これを忘れるとファイルが正しく送信されないので注意しましょう。

出力結果

すべての設定が完了したら、ブラウザで確認してみましょう。以下のようなインターフェースが表示され、写真を回転したりズームしたりできるようになります。デフォルトの見た目はシンプルですが、CSSを調整すれば自由にデザインをカスタマイズ可能です。

なお、アップロードした画像がずれて表示される場合があります。その場合は回転機能を使って位置を調整してください。このずれはブラウザ側の問題によって発生することがあります。

  1. OpenCVで画像を読み込んで表示する方法を解説

    本記事では、OpenCVライブラリを使って画像を読み込み、画面に表示する方法をわかりやすく解説します。OpenCVは、リアルタイムのコンピュータビジョン処理を主な目的としたオープンソースのプログラミングライブラリです。画像処理や機械学習の分野で広く利用されており、Pythonとの相性も抜群です。事前準備画像を読み込む前に、対象となる画像ファイルがプログラムと同じディレクトリ(フォルダ)内に保存されていることを確認してください。別の場所にある場合は、絶対パスまたは相対パスで正しく指定する必要があります。処理の手順(アルゴリズム)OpenCVで画像を読み込んで表示する流れは、以下の3ステップです。

  2. PythonとOpenCVで画像の輪郭を検出・描画する方法

    画像解析を行う際には、Python向けのオープンソースライブラリ「OpenCV（Open Source Computer Vision Library）」が広く利用されています。OpenCVをインストールした後、プログラム内では「cv2」という名前でインポートして使用します。 本記事では、画像ファイルに含まれる輪郭（コンタ）を検出し、描画する方法を解説します。輪郭とは、画像内の物体の形状を把握するために重要な情報で、「同じ明るさ（輝度）を持つ領域の境界上にある点を結んだ線」として定義されます。OpenCVでは、輪郭の検出にfindContours関数、輪郭の描画にdrawContours関数を