Как сохранить HTML5 холст в виде файла изображения в окне приложения 8 метро?

Question

var myImage = canvas.toDataURL("image/png");

Я думаю myImage имеет байты изображения, закодированные в формате PNG, теперь как сохранить myImage как файл (в папке с изображениями)?

Answer 1

Вместо того, чтобы использовать .toDataUrlнужно использовать .msToBlob:

var blob = canvas.msToBlob();

Затем вам нужно записать это на диск:

var output;
var input;
var outputStream;

Windows.Storage.ApplicationData.current.localFolder.createFileAsync("yourFile", 
          Windows.Storage.CreationCollisionOption.replaceExisting).
    then(function(file) {
        return file.openAsync(Windows.Storage.FileAccessMode.readWrite);
    }).then(function(stream) {
        outputStream = stream;
        output = stream.getOutputStreamAt(0);
        input = blob.msDetachStream();
        return Windows.Storage.Streams.RandomAccessStream.copyAsync(input, output);
    }).then(function() {
        return output.flushAsync();
    }).done(function() {
        input.close();
        output.close();
        outputStream.close();
    });

В папке с данными приложения вашего приложения теперь у вас будет изображение, записанное на диск.

Если вы хотите разместить его где-нибудь еще - например, мои фотографии и т. Д. - тогда вам просто нужно использовать одну из других папок для хранения. Смотрите образец здесь. Обратите внимание, что для доступа к библиотеке изображений вам необходимо добавить эту возможность в манифест (просто установите флажок в редакторе package.appxmanifest в VS)

Есть также много других опций формирования изображений для более сложных манипуляций с выходным файлом. Смотрите пример изображения для кода.

Answer 2

Я обнаружил, что это самый полезный фрагмент кода из простого примера обработки изображений. Это позволяет вам кодировать в PNG или JPG, а не просто выводить данные холста.

Helpers.getFileFromSavePickerAsync().then(function (file) {
    filename = file.name;

    switch (file.fileType) {
        case ".jpg":
            encoderId = Imaging.BitmapEncoder.jpegEncoderId;
            break;
        case ".bmp":
            encoderId = Imaging.BitmapEncoder.bmpEncoderId;
            break;
        case ".png":
        default:
            encoderId = Imaging.BitmapEncoder.pngEncoderId;
            break;
    }

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

    // BitmapEncoder expects an empty output stream; the user may have selected a
    // pre-existing file.
    stream.size = 0;
    return Imaging.BitmapEncoder.createAsync(encoderId, stream);
}).then(function (encoder) {
    var width = id("outputCanvas").width;
    var height = id("outputCanvas").height;
    var outputPixelData = Context.getImageData(0, 0, width, height);

    encoder.setPixelData(
        Imaging.BitmapPixelFormat.rgba8,
        Imaging.BitmapAlphaMode.straight,
        width,
        height,
        96, // Horizontal DPI
        96, // Vertical DPI
        outputPixelData.data
        );

    return encoder.flushAsync();
}).then(function () {
    WinJS.log && WinJS.log("Saved new file: " + filename, "sample", "status");
    id("buttonSave").disabled = false;
    id("buttonRender").disabled = false;
}).then(null, function (error) {
    WinJS.log && WinJS.log("Failed to save file: " + error.message, "sample", "error");
}).done(function () {
    stream && stream.close();
});