새 이미지를 인코드하는 방법(HTML)

아티클
02/12/2016

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

BitmapEncoder 개체를 사용하여 새 이미지를 파일에 저장하는 방법을 보여 줍니다. 기본 이미지를 변경하려면 이미지를 편집하는 방법을 참조하세요.

알아야 할 사항

기술

사전 요구 사항

JavaScript로 작성한 기본 Windows 런타임 앱을 만들 수 있다고 가정합니다. 자세한 내용은 JavaScript를 사용하여 첫 번째 Windows 런타임 앱 빌드를 참조하세요.

지침

단계 1: 파일 선택기를 사용하여 대상 파일 선택

FileSavePicker를 사용하여 시스템에서 새 파일 또는 기존 파일을 선택할 수 있습니다. 선택기에서 파일을 가져온 후 BitmapEncoder에 대한 대상으로 사용할 수 있습니다.

새 파일 선택기 개체를 만들고, JPEG 이미지를 허용하도록 파일 형식 옵션을 설정하고, 사용자에게 선택기를 표시합니다.

// variables to store objects across multiple async operations
var encoder;
var fileType;
var stream;

var picker = new Windows.Storage.Pickers.FileSavePicker();
        
picker.fileTypeChoices.insert("JPEG file", [".jpg"]);
picker.defaultFileExtension = "jpg";
picker.suggestedFileName = "untitled";

picker.pickSaveFileAsync().then(function (file) {

            if (!file) {
                // The user did not select a file.
                return;
            }

            fileType = file. fileType;

참고 파일 형식 필터에 확장명을 추가할 수 있습니다. 자세한 내용은 Windows.Storage.Pickers를 참조하세요.

참고 Windows.Graphics.Imaging.BitmapEncoder.getEncoderinfoEnumerator를 사용하여 모든 지원되는 인코더 및 파일 확장명 목록을 가져올 수 있습니다.

단계 2: 새 이미지에 대한 인코더 개체 만들기

대상 파일이 있는 경우 파일에서 ReadWrite 액세스 권한이 있는 IRandomAccessStream을 가져와서 BitmapEncoder를 인스턴스화하는 데 사용합니다. 사용자가 선택한 파일 형식에 대한 올바른 인코더 ID도 결정해야 합니다. 이 예제에서는 JPEG 이미지만 허용하므로 여러 파일 형식을 허용하려면 파일의 FileType 매개 변수를 기반으로 전환해야 합니다.

        return file.openAsync(Windows.Storage.FileAccessMode.readWrite);
        }).then(function (_stream) {
        stream = _stream;
              stream.size = 0;

        var encoderId;
        switch (fileType) {
            case ".jpg":
                encoderId = Windows.Graphics.Imaging.BitmapEncoder.jpegEncoderId;
                break;
        }
        return Windows.Graphics.Imaging.BitmapEncoder.createAsync(encoderId, stream);
        }).then(function (encoder) {

참고 기본 제공 인코더 ID는 BitmapEncoder의 정적 멤버로 사용될 수 있습니다.

사용자가 저장할 기존 파일을 선택하는 경우 BitmapEncoder의 출력 스트림이 비어 있어야 하므로 IRandomAccessStream.size를 0으로 설정해야 합니다.

이제 BitmapEncoder가 빈 JPEG 이미지를 표시합니다.

단계 3: 인코더의 일부 데이터 설정

BitmapEncoder 개체가 있으므로 이제 메타데이터 및 픽셀 데이터를 설정하고 미리 보기 및 변형(예: 회전, 크기 조정)을 제어할 수 있습니다.

다음 코드에서는 trivial 픽셀 데이터 배열을 설정합니다. 이미징 속성 및 메타데이터를 설정하는 방법에 대해서는 이미지 메타데이터를 쓰는 방법을 참조하세요.

            // An array representing 2x2 red, opaque pixel data
            var pixels = [255, 0, 0, 255, 255, 0, 0, 255, 255, 0, 0, 255, 255, 0, 0, 255];

            encoder.setPixelData(
                Windows.Graphics.Imaging.BitmapPixelFormat.rgba8,
                Windows.Graphics.Imaging.BitmapAlphaMode.straight,
                2, // pixel width
                2, // pixel height
                96, // horizontal DPI
                96, // vertical DPI
                pixels
                );

참고 CreateAsync 메서드를 사용하여 BitmapEncoder를 만들 때 유효한 이미지를 만들려면 SetPixelData 메서드를 사용하여 최소한 픽셀 데이터 정보를 제공해야 합니다.

단계 4: 파일에 변경 내용 저장

BitmapEncoder 편집을 마치면 파일을 사용하기 전에 인코더를 플러시하고 기본 스트림을 닫아야 합니다. 그렇지 않으면 이미지가 저장되지 않으므로 데이터가 손실됩니다.

마지막으로 오류를 처리합니다. 파일 형식에서 지원하지 않거나 유효하지 않은 인코딩 작업을 수행하더라도 FlushAsync를 호출할 때까지는 오류가 표시되지 않습니다. 즉, 미리 보기를 지원하지 않는 형식(예: BMP)에서 IsThumbnailGenerated를 True로 설정하여 미리 보기를 저장하려고 하면 FlushAsync가 실패합니다.

        return encoder.flushAsync();
        }).then(function () {
            // This means the encoder saved successfully.
        }, function (error) {
            // There was an error encoding, error.message has the error string.
        }).done(null, function () {
            // Close the stream regardless of whether encoding was successful. Otherwise it will continue to be locked for Read/Write access.
            stream && stream.close();
        });
 }

참고 FlushAsync 함수를 호출하면 인코더가 저장되며, 추가 작업을 수행하려면 인코더를 다시 만들어야 합니다. 인코더를 나중에 사용하려면 인코더 사용을 마칠 때까지 FlushAsync를 호출하지 마세요.

다음을 통해 공유