画像サイズ変更機能を備えた ASP.NET HTML コードライターを作成する方法-jsチュートリアル-php.cn

画像サイズ変更機能を備えた ASP.NET HTML コードライターを作成する方法

Patricia Arquette

リリース： 2024-10-26 04:50:02

オリジナル

170 人が閲覧しました

画像の解像度は、開発者として見落とされることがあります。結局のところ、基本的な機能、エラー処理、直感性が最優先されます。ただし、画像の解像度やサイズの処理が重要ではないという意味ではありません。

実際、画像の処理が不適切だと、Web サイトやアプリケーションの速度が低下したり、帯域幅を過剰に消費したり、UI や UX が損なわれたりする可能性があります。これを防ぐ良い方法の 1 つは、アップロードされた画像を保存する前にサイズを変更することです。それでは、ASP.NET、ImageMagick、WYSIWYG HTML エディターを使用して、画像のサイズ変更を行う HTML コードライターを構築する方法を見てみましょう。

重要なポイント

画像のサイズ変更により、読み込み時間と帯域幅の使用量が削減され、パフォーマンスが向上します。
ASP.NET、Froala、ImageMagick を組み合わせて、画像のサイズを変更できる Web アプリを構築します。
Froala Editor を使用すると、簡単な画像アップロードとリッチテキスト編集が可能です。
ImageMagick はサイズ変更を簡素化し、画像が設定された寸法に確実に適合するようにします。
検証、拡張などのオプションを備えたカスタマイズ可能なソリューション。

ここでは、HTML コードライターの画像サイズ変更機能の簡単なデモンストレーションを示します。

How to make an ASP.NET HTML code writer with image resize capabilities

アップロード前に 2 つのサンプル画像がどのように横向きになっていたか、そしてアップロード後に両方がどのように変化したかに注目してください。次に、画像サイズ変更機能を備えた ASP.NET ベースの HTML コードライターを使用する方法について説明します。詳細については、.NET イメージのサイズ変更に関するドキュメントを参照してください。次に、アプリケーションを設定しましょう。

アプリケーションのセットアップ

開発部分に入る前に、使用するツールを確認してみましょう:

ASP.NET Core: Visual Studio
ImageMagick: 画像を強化するための広範なオープンソースソフトウェアスイート
Froala: HTML コード編集、画像アップロード、Markdown などをサポートする強力な WYSIWYG HTML エディター

必要なものがわかったので、次の手順を実行してプロジェクトを作成しましょう:

Visual Studio を開いて新しいプロジェクトを作成します。
「ASP.NET Core Web アプリ (Razor Pages)」テンプレートを選択します。この場合、プロジェクト名は FroalaImageResizeDemo.
フレームワークとして「.NET 8.0 (長期サポート)」を選択します。
「作成」をクリックします。

次に、CDN 経由で Froala エディタを追加しましょう:

ページ > の下にある「_Layout.cshtml」ファイルを開きます。共有ディレクトリ。
セクション内に Froala CDN リンクを追加します。

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/froala-editor/4.3.0/css/froala_editor.pkgd.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/froala-editor/4.3.0/js/froala_editor.pkgd.min.js"></script>Once we’ve included Froala in our project, we will be installing ImageMagick via NuGet Package Manager.

ログイン後にコピー

ソリューションエクスプローラーでプロジェクト名を右クリックし、[NuGet パッケージの管理] を選択します。
「参照」タブで「Magick.NET-Q8-AnyCPU」を検索し、インストールボタンをクリックします。

最後に、画像を保存できるフォルダーを作成しましょう。ソリューションエクスプローラーで、「wwwroot」フォルダーを見つけます。その中に「images」という名前の新しいフォルダーを作成します。プロジェクトの設定が完了したので、次は画像のサイズを変更する HTML コードライターを作成します。

HTML コードライターの作成

まず、Froala Editor を初期化してロードできる新しいページを作成しましょう。

Pages フォルダーを右クリックします。
追加 > を選択します。 新商品 > かみそりページ.
「Editor.cshtml」という名前を付けましょう。

新しく作成したページに次のコードを挿入します:

@page
@model FroalaImageResizeDemo.Pages.EditorModel
@{
    ViewData["Title"] = "Froala Image Resize Demo";
}

<h2 class="mt-5 mb-3">@ViewData["Title"]</h2>

<div id="editor">For this demo, we're resizing all uploaded images to 600 px by 300 px.</div>


<script>
    new FroalaEditor('#editor', {
        imageUploadURL: '',
        heightMin: 600
    });
</script>

ログイン後にコピー

このページには、Froala エディターとヘッダーが含まれます。「editor」ID を持つ

は、Froala をロードするコンテナーです。一方、imageUploadURL は、アップロード要求が行われる場所を決定する Froala 画像アップロードオプションです。現時点では、そのオプションは空白のままにしておきますが、後でもう一度説明します。

HTML コードライター用の専用ページができました。ただし、ナビゲーションからはまだアクセスできないため、リンクを追加して修正しましょう:

「_Layout.cshtml」を再度開きます。
次のコードスニペットを、ナビゲーションバーセクション内の

<li class="nav-item">
    <a class="nav-link text-dark" asp-page="/Editor">Froala Editor</a>
</li>

ログイン後にコピー

その後、F5 キーまたは再生ボタンを押してアプリケーションを実行してみてください。ナビゲーションバーに「Froala Editor」リンクが表示され、デフォルトの ASP.NET Core アプリケーションが一目でわかるはずです。それをクリックすると、フロアラが動作しているのが表示されます。テキストの編集、画像のアップロード、その他のリッチテキストアクションを実行できるようになりました。あとは、HTML コードライターと ImageMagick を組み合わせて画像のサイズを変更するだけです。

画像のサイズを変更するための ImageMagick の統合

ImageMagick のサイズ変更機能を組み込むには、まず新しいコントローラーを作成する必要があります。

Controllers フォルダーを右クリックします (IDE によって生成されなかった場合はフォルダーを作成します)。
追加 > を選択します。 新しいアイテム.
ASP.NET Core カテゴリで、「API コントローラー — 空」を選択します。
「FroalaApiController.cs」という名前を付け、追加ボタンをクリックします。

次に、新しく作成したコントローラーに次のコードを追加します。

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/froala-editor/4.3.0/css/froala_editor.pkgd.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/froala-editor/4.3.0/js/froala_editor.pkgd.min.js"></script>Once we’ve included Froala in our project, we will be installing ImageMagick via NuGet Package Manager.

ログイン後にコピー

まず、それを有効にするために「using ImageMagick」を必ず含めてください。次に、リクエストからファイルが正常にアップロードされたかどうかを確認します。次に、画像を保存するファイルパスを定義します (この場合、wwwroot > images の下)。その後、希望するサイズ (600×600 ピクセル) の新しい MagickImage オブジェクトを宣言して、画像のサイズを変更します。最後に、成功すると、画像の URL を含む JSON とともに HTTP 200 ステータスコードを返します。 Froala がエディター内に画像を表示し、完了です!

結論

画像のサイズ変更は、どのアプリケーションにとっても重要な作業です。たとえば、表示目的 (電子メールやブログの画像など) のために画像の解像度を制限する必要がある場合があります。効率性とコスト削減のために、画像サイズを最小限に抑える必要がある場合もあります。ただし、画像の処理は時々面倒になることがあります。幸いなことに、この HTML コードライターのデモで示したように、これを簡単に実現できる ImageMagick のようなツールが多数あります。

.NET、Froala、ImageMagick を組み合わせることで、アプリケーションで画像のサイズ変更を実装するプロセス全体を合理化できます。自分のプロジェクトでも、同じツールを使用して、さらに上のレベルに引き上げることもできます。たとえば、画質の向上、ファイルの種類とサイズの検証、自動保存などを追加して、アプリケーションをより堅牢にすることができます。さあ、あなたのプロジェクトに (イメージ) マジック (K) を振りかける番です!

以上が画像サイズ変更機能を備えた ASP.NET HTML コードライターを作成する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。