이미지를 편집하는 방법(HTML)

아티클
02/12/2016

[ 이 문서는 Windows 런타임 앱을 작성하는 Windows 8.x 및 Windows Phone 8.x 개발자를 대상으로 합니다. Windows 10용으로 개발하는 경우에는 최신 설명서를 참조하세요.]

이 항목에서는 BitmapEncoder를 사용하여 기존 이미지를 편집하는 방법을 보여 줍니다. BitmapEncoder를 사용하면 크기 조정 및 자르기와 같은 변형을 적용하고, 메타데이터 및 속성을 설정하고, 편집되지 않은 데이터를 유지하면서 픽셀을 편집할 수 있습니다. 여기서는 BitmapEncoder를 원래 이미지 데이터로 초기화하고, 하나 이상의 편집 작업을 적용한 다음 저장하여 원래 파일을 업데이트하는 방법을 보여 줍니다.

BitmapEncoder를 사용하여 이미지를 완전히 처음부터 새로 만들 수도 있습니다. 이에 대해서는 새 이미지를 인코드하는 방법에서 설명합니다.

알아야 할 사항

기술

사전 요구 사항

JavaScript로 작성한 기본 Windows 런타임 앱을 만들 수 있다고 가정합니다. 자세한 내용은 JavaScript를 사용하여 첫 번째 Windows 런타임 앱 빌드를 참조하세요.
BitmapDecoder 개체가 있습니다. 이미지를 디코드하는 방법에서 해당 프로세스를 안내합니다.

지침

단계 1: 원래 이미지에서 디코더 개체 가져오기

편집할 이미지 파일에서 초기화된 BitmapEncoder 개체와 파일에서 연 IRandomAccessStream을 받는 함수의 시작 부분을 작성합니다. 이 예에서는 원래 이미지를 덮어쓰므로 ReadWrite 권한을 사용하여 연 스트림을 사용해야 합니다.

function (decoder, fileStream) {

참고 디코더 및 스트림 개체를 가져오는 방법에 대한 자세한 내용은 이미지를 디코드하는 방법을 참조하세요.

OpenAsync를 호출할 때 FileAccessMode 매개 변수를 ReadWrite로 변경해야 합니다.

단계 2: 편집을 위해 인코더 개체 초기화

InMemoryRandomAccessStream을 인코딩 대상으로 만들고 CreateForTranscodingAsync 메서드를 사용하여 코드 변환 BitmapEncoder를 만듭니다.

InMemoryRandomAccessStream을 인코드된 파일을 저장할 임시 위치로 사용합니다. 그렇지 않으면 디코더와 인코더가 동일한 스트림을 동시에 읽고 쓰므로 작동하지 않을 것입니다.

    // Keep variables in-scope across multiple async 
    var memStream = new Windows.Storage.Streams.InMemoryRandomAccessStream();
    var encoder;

    Windows.Graphics.Imaging.BitmapEncoder
    .createForTranscodingAsync(memStream, decoder).then(function (_encoder) {
        encoder = _encoder;

참고 CreateForTranscodingAsync는 원본과 동일한 형식으로만 이미지에 데이터를 복사할 수 있고, 형식을 변환할 수 없습니다.

이제 BitmapEncoder는 원본 BitmapDecoder의 데이터로 초기화되었습니다.

단계 3: 이미지 변형

이제 인코더가 있으므로 메타데이터 및 픽셀 데이터 설정을 비롯한 다양한 작업을 수행할 수 있습니다. 이 예제에서는 BitmapTransform 메서드를 사용하여 이미지를 크기 조정하고 회전합니다. 메타데이터를 설정하는 방법에 대한 자세한 내용은 이미지 메타데이터를 쓰는 방법을 참조하세요. 픽셀 데이터를 설정하는 방법에 대한 자세한 내용은 새 이미지를 인코드하는 방법을 참조하세요.

        // Scaling occurs before flip/rotation.
        encoder.bitmapTransform.scaledWidth = 640;
        encoder.bitmapTransform.scaledHeight = 480;

        // Fant is a relatively high quality interpolation algorithm.
        encoder.bitmapTransform.interpolationMode =
            Windows.Graphics.Imaging.BitmapInterpolationMode.fant;

        // Generate a new thumbnail from the updated pixel data.
        // Note: Only JPEG, TIFF and JPEG-XR images support encoding thumbnails.
        encoder.isThumbnailGenerated = true;

        encoder.bitmapTransform.rotation =
            Windows.Graphics.Imaging.BitmapRotation.clockwise90Degrees;

참고 CreateForTranscodingAsync를 사용하여 BitmapEncoder를 만들 경우 인코더는 전체 원본 데이터를 빠짐 없이 복사하려고 시도합니다. 예를 들어 JPEG를 코드 변환하고 일부 이미징 속성을 편집하지만 변경을 적용하거나 픽셀 데이터를 편집하지 않을 경우 이미지가 손실 없이 복사됩니다. 하지만 디코더에서 픽셀 데이터를 가져온 다음 인코더에서 설정하여 이미지를 처리할 경우에는 많은 손실이 발생하여 픽셀 데이터를 다시 인코드해야 합니다.

단계 4: 인코더 플러시 및 오류 처리

인코더 사용을 마쳤으면 플러시하여 인코딩 작업을 완료합니다. 이미지 형식이 인코딩 미리 보기를 지원하지 않는 경우도 처리해야 합니다. 항상 미리 보기를 지원하는 JPEG와 같은 이미지 형식을 편집할 경우에는 이 오류 처리를 건너뛸 수 있습니다.

        return encoder.flushAsync();
    }).then(null, function (error) {
        switch (error.number) {
            // If the encoder doesn't support writing a thumbnail, then try again
            // but disable thumbnail generation.
            case -2003292287: // WINCODEC_ERR_UNSUPPORTEDOPERATION
                encoder.isThumbnailGenerated = false;
                return encoder.flushAsync();
            default:
                throw error;
        }

단계 5: 인코드된 이미지를 파일로 저장 및 정리

마지막으로 메모리 내 스트림의 내용을 원본 파일의 스트림으로 복사하고 모든 스트림을 닫습니다.

    }).then(function () {
        // Overwrite the contents of the file with the updated image stream.
        memStream.seek(0);
        fileStream.seek(0);
        fileStream.size = 0;
        return Windows.Storage.Streams.RandomAccessStream.copyAsync(memStream, fileStream);
    }).done(function () {
        memStream.close();
        fileStream.close();
    });

다음을 통해 공유