Djangoでのクライアント側の画像のズームと回転

場合によっては、画像を回転またはズームする必要があります。このような場合、クライアント側の画像ズームライブラリを使用して、htmlファイルにズーム-回転するjquery機能を追加します。 jqueryjsとcssをhtmlファイルにロードする必要がありました。

Djangoプロジェクトとアプリを作成します。 URLを設定する INSTALLED_APPSにアプリを追加するなどの基本的な操作を行います。

django-client-side-image-croppingをインストールしますライブラリ

pip install django-client-side-image-cropping

現在、 settings.pyにあります次の行を追加します-

INSTALLED_APPS+=['client_side_image_cropping']

ここでは、モジュールをアプリとして追加するという簡単な設定を行いました。

例

models.py内、次の行を追加します-

from django.db import models

# Create your models here.
class Data(models.Model):

   image=models.ImageField(upload_to ='myimages/')

ここでは、画像フィールドを持つモデルを設定します。

settings.pyでメディアルートを設定します。

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_RO
OT)

ここでは、基本的なメディア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})

ここでは、簡単なフォームを作成しました。これはモデルフォームであるため、画像フィールドにトリミングウィジェットを追加しました。

home.html、 以下を追加-

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

フロントエンドで、いくつかのjQueriesといくつかのスタイルをロードし、入力を受け取るフォームをレンダリングしました。

これですべて完了です。出力を確認しましょう。

出力

このようなインターフェイスが表示され、写真を回転およびズームできます。見栄えの良いインターフェースではありませんが、CSSを使用して変更できます。

アップロードされた画像はずれて見える場合があるため、回転を使用して正しく設定してください。その変位は、ブラウザの問題が原因である可能性があります。

Djangoでのクライアント側の画像のズームと回転

Djangoでスクリーンショットを撮るウェブサイトを作成する

Djangoのモデルインスタンスに翻訳を追加する

OpenCVを使用した画像の読み取りと表示
この記事では、OpenCVライブラリを使用して画像を読み取って表示する方法を学習します。 OpenCVは、主にリアルタイムのコンピュータービジョンを目的としたプログラミング機能のライブラリです。画像を読み取る前に、画像がプログラムと同じディレクトリにあることを確認してください。アルゴリズム Step 1: Import OpenCV. Step 2: Read an image using imread(). Step 3: Display the image using imshow(). サンプルコード import cv2 as cv image = cv.imread ('
PythonでOpenCVを使用して輪郭を検索して描画する
画像分析の目的で、Opencv（Open Source Computer Vision Library）pythonライブラリを使用します。 opencvのインストール後にインポートする必要のあるライブラリ名はcv2です。以下の例では、画像ファイルに存在する輪郭を見つけます。輪郭は、画像に存在する形状を識別するのに役立ちます。等高線は、同じ強度を持つ画像の境界に沿ったすべての点を結ぶ線として定義されます。 OPenCVのfindContours関数は、輪郭を識別するのに役立ちます。同様に、drawContours関数は、輪郭を描画するのに役立ちます。以下は両方の構文です。構文 cv.Fi