How to copy and paste images (HTML)

  • Article

[This article is for Windows 8.x and Windows Phone 8.x developers writing Windows Runtime apps. If you’re developing for Windows 10, see the latest documentation]

Users expect to copy and paste images by using the Clipboard. This topic shows how to support copying and pasting of images in your apps.

Check out our Clipboard sample app for comprehensive examples that show how to copy and paste other types of data.

What you need to know

Technologies

Prerequisites

  • You should be familiar with Quickstart: Clipboard basics.
  • You should be familiar with Visual Studio and its associated templates.
  • You should be familiar with JavaScript.

Copying an image to the Clipboard

  1. Retrieve an image that the user wants to copy. The following example uses the file picker to let the user specify an image from Pictures. To learn more about the file picker, see Quickstart: Accessing files with. To learn more about other ways to access files, see Accessing data and files.

    var picker = new Windows.Storage.Pickers.FileOpenPicker();
picker.viewMode = Windows.Storage.Pickers.PickerViewMode.thumbnail;
picker.suggestedStartLocation = Windows.Storage.Pickers.PickerLocationId.picturesLibrary;
picker.fileTypeFilter.replaceAll([".jpg", ".jpeg", ".png", ".bmp"]);
picker.pickSingleFileAsync().done(function (file) {
    if (file) {
        ...
    }
    ...
});

  2. Create the DataPackage object. Retrieve a RandomAccessStreamReference object that represents the image data in the selected file, and add the files to it.

    var dataPackage = new Windows.ApplicationModel.DataTransfer.DataPackage();
dataPackage.setBitmap(Windows.Storage.Streams.RandomAccessStreamReference.createFromFile(file));

  3. Retrieve a RandomAccessStreamReference object that represents the image in the selected file. Use the setBitmap method to add the image stream to the DataPackage object.

    var dataPackage = new Windows.ApplicationModel.DataTransfer.DataPackage();
dataPackage.setBitmap(Windows.Storage.Streams.RandomAccessStreamReference.createFromFile(file));

  4. Copy the contents of the DataPackage to the Clipboard.

    Windows.ApplicationModel.DataTransfer.Clipboard.setContent(dataPackage);

Pasting an image from the Clipboard

  1. Get the contents of the clipboard as a DataPackageView object.

    var dataPackageView = Windows.ApplicationModel.DataTransfer.Clipboard.getContent();

  2. Check whether the DataPackageView contains a bitmap and, if so, retrieve it. This example retrieves the bitmap and creates a URL for use as the src attribute of an img tag:

    
if (dataPackageView.contains(Windows.ApplicationModel.DataTransfer.StandardDataFormats.bitmap)) {
    dataPackageView.getBitmapAsync().then(function (streamRef) {
        return streamRef.openReadAsync();
    }).done(function (bitmapStream) {
        var blob = window.MSApp.createBlobFromRandomAccessStream(bitmapStream.contentType, bitmapStream);
        document.getElementById("imageHolder").src = window.URL.createObjectURL(blob, { oneTimeOnly: true });
            document.getElementById("imageHolder").style.visibility = "visible";
            displayStatus("Image pasted from Clipboard");
    }
    ....
}

Complete examples

This example shows how to copy an image that the user selects with the file picker.

function copyImage() {
       // User the file picker to let the user choose an image.
    var picker = new Windows.Storage.Pickers.FileOpenPicker();
    picker.viewMode = Windows.Storage.Pickers.PickerViewMode.thumbnail;
    picker.suggestedStartLocation = Windows.Storage.Pickers.PickerLocationId.picturesLibrary;
    picker.fileTypeFilter.replaceAll([".jpg", ".jpeg", ".png", ".bmp"]);
    picker.pickSingleFileAsync().done(function (file) {
        if (file) {
            var dataPackage = new Windows.ApplicationModel.DataTransfer.DataPackage();

            // Add the selected image to the DataPackage.
            dataPackage.setBitmap(Windows.Storage.Streams.RandomAccessStreamReference.createFromFile(file));

            try {
                // Copy the content to the Clipboard.
                Windows.ApplicationModel.DataTransfer.Clipboard.setContent(dataPackage);

            } catch (e) {
                // Copying data to the Clipboard can fail if, for example, another application is holding the 
                // Clipboard open.
                displayError("Error copying content to Clipboard: " + e + ". Try again.");
            }

        } else {
             displayStatus("No image selected");
        }
    });
}

The following example retrieves an image from the Clipboard.

function pasteImage() {
    // Get the content from the Clipboard.
    var dataPackageView = Windows.ApplicationModel.DataTransfer.Clipboard.getContent();

    if (dataPackageView.contains(Windows.ApplicationModel.DataTransfer.StandardDataFormats.bitmap)) {
        dataPackageView.getBitmapAsync().then(function (streamRef) {
            return streamRef.openReadAsync();
        }).done(function (bitmapStream) {
            var blob = window.MSApp.createBlobFromRandomAccessStream(bitmapStream.contentType, bitmapStream);
            document.getElementById("imageHolder").src = window.URL.createObjectURL(blob, { oneTimeOnly: true });
                document.getElementById("imageHolder").style.visibility = "visible";
                displayStatus("Image pasted from Clipboard");
        }, function (e) {
            displayError("Error retrieving image stream: " + e);
        });
    } else {
        displayStatus("No image on Clipboard");
    }
}

Quickstart: Clipboard basics

How to copy and paste HTML

How to copy and paste files

Guidelines and checklist for clipboard commands

DataPackage

Windows.ApplicationModel.DataTransfer

Clipboard sample app