windows-8 - WinJSでWindows.Graphics.Imaging.BitmapDecoderを表示する方法は？

Question

画像にフィルター効果を適用するアプリを作ろうとしています。FilePickerからIRandomAccessStreamを取得し、それをBitmapDecoderに変換できます。しかし、ビットマップデータを画像として表示する方法がわかりませんか？ファイル名やパスは使用せず、BitmapDataを画像として表示したいだけです。WinJSでどのコントロールを使用する必要がありますか？その方法は？

Answer 1

IInputStreamまたはIRandomAccessStreamをとを使用して画像に変換しMSApp.createStreamFromInputStream()ますURL.createObjectURL()。

var path = Windows.Storage.ApplicationData.current.localFolder.path + "\\thing.jpg";
Windows.Storage.StorageFile.getFileFromPathAsync(path).then(function (file) {
    file.openAsync(Windows.Storage.FileAccessMode.read).then(function (randomStream) {

        // Convert the stream to MS-Stream.
        var msStream = MSApp.createStreamFromInputStream("image/jpeg", randomStream);
        var imageUrl = URL.createObjectURL(msStream);

        var img = document.getElementById("theImage");
        img.src = imageUrl;

    }, onError);
}, onError);

HTMLは次のようになります。

<img id="theImage" src="#" />

Answer 2

これらのMSDNブログでは、次のプロセスについて詳しく説明してい ますhttp://goo.gl/izCdf http://goo.gl/OLgfn

BitmapDecoderからBitmapEncoderを作成する方法を見つけました。そのエンコーダーを使用して、フィールドに表示できるメモリ内ストリームを作成できます。

       internal async Task<InMemoryRandomAccessStream> applyFilterInternal()
    {
        inputStream = await file.OpenAsync(Windows.Storage.FileAccessMode.ReadWrite);
        decoder = await Windows.Graphics.Imaging.BitmapDecoder.CreateAsync(inputStream);

        var memStream = new Windows.Storage.Streams.InMemoryRandomAccessStream();
        var encoder = await Windows.Graphics.Imaging.BitmapEncoder.CreateForTranscodingAsync(memStream, decoder);

        encoder.BitmapTransform.ScaledWidth = 640;
        encoder.BitmapTransform.ScaledHeight = 480;
        encoder.BitmapTransform.Rotation = Windows.Graphics.Imaging.BitmapRotation.Clockwise90Degrees;

        // Fant is a relatively high quality interpolation algorithm.
        encoder.BitmapTransform.InterpolationMode = Windows.Graphics.Imaging.BitmapInterpolationMode.Fant;

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

        await encoder.FlushAsync();
        return memStream;
    }

public IAsyncOperation<InMemoryRandomAccessStream> applyFilter()
    {
        Task<InMemoryRandomAccessStream> from = applyFilterInternal();
        IAsyncOperation<InMemoryRandomAccessStream> to = from.AsAsyncOperation();
        return to;
    }

これを表示するには-

            filter.applyFilter().then(function (memStream) {
            var msStream = MSApp.createStreamFromInputStream("image/jpeg", memStream);
            var imageURL = URL.createObjectURL(msStream);
            id("imageInput").src = imageURL;

        });