windows-8 - 如何在 WinJS 中显示 Windows.Graphics.Imaging.BitmapDecoder？

Question

我正在尝试制作一个对图像应用滤镜效果的应用程序。从 FilePicker 我可以得到一个 IRandomAccessStream，我可以将它转换为 BitmapDecoder。但我不确定如何将位图数据显示为图像？我不想使用文件名或路径，只想将 BitmapData 显示为图像。我应该在 WinJS 中使用什么控件以及如何操作？

Answer 1

MSApp.createStreamFromInputStream()使用和将 IInputStream 或 IRandomAccessStream 转换为图像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;

        });