Comment copier et coller des images (HTML)

Article
12/11/2015

[ Cet article est destiné aux développeurs de Windows 8.x et Windows Phone 8.x qui créent des applications Windows Runtime. Si vous développez une application pour Windows 10, voir la Documentation ]

Les utilisateurs s’attendent à copier et à coller les images à l’aide du Presse-papiers. Cette rubrique vous montre comment assurer la prise en charge de la copie et du collage d’images dans vos applications.

Via notre exemple d’application utilisant le Presse-papiers, vous découvrirez des exemples complets qui montrent comment copier et coller d’autres types de données.

Ce que vous devez savoir

Technologies

Prérequis

Vous devez être familiarisé avec Démarrage rapide : fonctions de base du Presse-papiers.
Vous devez être familiarisé avec Visual Studio et ses modèles connexes.
Vous devez être familiarisé avec JavaScript.

Copie d’une image dans le Presse-papiers

Récupérez une image que l’utilisateur veut copier. L’exemple suivant utilise le sélecteur de fichiers pour permettre à l’utilisateur de spécifier une image à partir du dossier Images. Pour en savoir plus sur le sélecteur de fichiers, voir Démarrage rapide : accès aux fichiers à l’aide de sélecteurs de fichiers. Pour en savoir plus sur les autres moyens d’accès aux fichiers, voir Accès aux données et aux fichiers.
```
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) {
        ...
    }
    ...
});
```
Créez l’objet DataPackage. Récupérez un objet RandomAccessStreamReference qui représente les données de l’image dans le fichier sélectionné, et ajoutez-y les fichiers.
```
var dataPackage = new Windows.ApplicationModel.DataTransfer.DataPackage();
dataPackage.setBitmap(Windows.Storage.Streams.RandomAccessStreamReference.createFromFile(file));
```
Récupérez un objet RandomAccessStreamReference qui représente l’image dans le fichier sélectionné. Utilisez la méthode setBitmap pour ajouter le flux de l’image à l’objet DataPackage.
```
var dataPackage = new Windows.ApplicationModel.DataTransfer.DataPackage();
dataPackage.setBitmap(Windows.Storage.Streams.RandomAccessStreamReference.createFromFile(file));
```

Copiez le contenu de DataPackage dans le Presse-papiers.

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

Collage d’une image à partir du Presse-papiers

Récupérez le contenu du Presse-papiers sous la forme d’un objet DataPackageView.

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

Vérifiez si DataPackageView contient une image bitmap et, le cas échéant, récupérez-la. Cet exemple récupère l’image bitmap et crée une URL à utiliser en tant qu’attribut src d’une balise img :


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");
    }
    ....
}

Exemples complets

Cet exemple montre comment copier une image que l’utilisateur sélectionne avec le sélecteur de fichiers.

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");
        }
    });
}

L’exemple suivant récupère une image à partir du Presse-papiers.

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");
    }
}