이미지 크기 조정 기능을 갖춘 ASP.NET HTML 코드 작성기를 만드는 방법-JS 튜토리얼-php.cn

이미지 크기 조정 기능을 갖춘 ASP.NET HTML 코드 작성기를 만드는 방법

Patricia Arquette

풀어 주다： 2024-10-26 04:50:02

원래의

170명이 탐색했습니다.

이미지 해상도는 개발자로서 때때로 간과되는 부분입니다. 결국 기본 기능, 오류 처리 및 직관성이 우선입니다. 하지만 그렇다고 이미지 해상도나 크기를 다루는 것이 중요하지 않다는 뜻은 아닙니다.

사실 부적절한 이미지 처리로 인해 웹사이트와 애플리케이션 속도가 느려지고 대역폭이 과도하게 소모되거나 UI나 UX가 손상될 수 있습니다. 이를 방지하는 한 가지 좋은 방법은 업로드된 이미지를 저장하기 전에 크기를 조정하는 것입니다. 이제 ASP.NET, ImageMagick 및 WYSIWYG HTML 편집기를 사용하여 이미지 크기 조정이 가능한 HTML 코드 작성기를 구축하는 방법을 알아봅시다.

주요 시사점

이미지 크기 조정은 로드 시간과 대역폭 사용량을 줄여 성능을 향상합니다.
ASP.NET, Froala 및 ImageMagick을 결합하여 이미지 크기 조정 기능이 있는 웹 앱을 구축합니다.
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 코드 편집, 이미지 업로드, 마크다운 등을 지원하는 강력한 WYSIWYG HTML 편집기

이제 무엇이 필요한지 알았으니 다음 단계에 따라 프로젝트를 생성해 보겠습니다.

Visual Studio를 열고 새 프로젝트를 만듭니다.
'ASP.NET Core 웹앱(Razor Pages) 템플릿을 선택합니다. 우리의 경우 프로젝트 이름은 FroalaImageResizeDemo.
프레임워크로 “.NET 8.0(장기 지원)”을 선택하세요.
'만들기'를 클릭하세요.

다음으로 CDN을 통해 Froala Editor를 추가해 보겠습니다.

페이지 > 아래에서 '_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를 초기화하고 불러올 수 있는 새 페이지를 만들어 보겠습니다.

페이지 폴더를 마우스 오른쪽 버튼으로 클릭하세요.
추가 > 새 아이템 > 레이저 페이지.
이름을 "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 편집기와 헤더가 포함되어 있습니다. ID가 "editor"인

는 Froala를 로드할 컨테이너입니다. 한편, imageUploadURL은 업로드 요청이 이루어지는 위치를 결정하는 Froala 이미지 업로드 옵션입니다. 지금은 해당 옵션을 비워 두겠습니다. 나중에 다시 설명하겠습니다.

이제 HTML 코드 작성기를 위한 전용 페이지가 생겼습니다. 하지만 여전히 내비게이션을 통해 접근할 수 없으므로 링크를 추가하여 문제를 해결해 보겠습니다.

“_Layout.cshtml”을 다시 엽니다.
navbar 섹션 내

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

로그인 후 복사

이후 F5 또는 재생 버튼을 눌러 애플리케이션을 실행해 보세요. 이제 탐색 모음에 있는 "Froala Editor" 링크를 통해 기본 ASP.NET Core 애플리케이션을 엿볼 수 있습니다. 그것을 클릭하면 Froala가 실제로 작동하는 것을 볼 수 있습니다. 이제 텍스트를 편집하고, 이미지를 업로드하고, 기타 서식 있는 텍스트 작업을 수행할 수 있습니다. 이제 남은 일은 이미지 크기 조정을 위해 HTML 코드 작성기와 ImageMagick을 결합하는 것입니다.

이미지 크기 조정을 위한 ImageMagick 통합

ImageMagick의 크기 조정 기능을 포함하려면 먼저 새 컨트롤러를 만들어야 합니다.

Controller 폴더를 마우스 오른쪽 버튼으로 클릭합니다(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.

로그인 후 복사

먼저 'ImageMagick 사용'을 포함하여 활성화하세요. 그런 다음 요청에서 파일이 성공적으로 업로드되었는지 확인합니다. 그런 다음 이미지를 저장할 파일 경로를 정의합니다(이 경우 wwwroot > images 아래). 그런 다음 원하는 크기(600×600 픽셀)로 새로운 MagickImage 객체를 선언하여 이미지 크기를 조정합니다. 마지막으로 성공 시 이미지의 URL이 포함된 JSON과 함께 HTTP 200 상태 코드를 반환합니다. 그러면 Froala가 편집기에 이미지를 표시하고 완료됩니다!

결론

이미지 크기 조정은 모든 애플리케이션에서 중요한 작업입니다. 예를 들어 표시 목적(예: 이메일 또는 블로그 이미지)을 위해 이미지 해상도를 제한해야 할 수도 있습니다. 효율성과 비용 절감을 위해 이미지 크기를 최소화해야 할 수도 있습니다. 그러나 이미지 처리는 때때로 고통스러울 수 있습니다. 다행히도 이 HTML 코드 작성기 데모에서 보여드린 것처럼 이를 쉽게 수행하는 데 도움이 되는 ImageMagick과 같은 수십 가지 도구가 있습니다.

.NET, Froala 및 ImageMagick을 결합하면 애플리케이션에서 이미지 크기 조정을 구현하는 전체 프로세스를 간소화할 수 있습니다. 자신의 프로젝트의 경우 동일한 도구를 사용하여 한 단계 더 발전시킬 수도 있습니다. 예를 들어, 이미지 품질 향상, 파일 유형 및 크기 확인, 자동 저장 등을 추가하여 애플리케이션을 더욱 강력하게 만들 수 있습니다. 이제 당신의 프로젝트에 (이미지)마법(K)을 뿌릴 차례입니다!

위 내용은 이미지 크기 조정 기능을 갖춘 ASP.NET HTML 코드 작성기를 만드는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!