Comment copier et coller des images
Réduire la table des matières
Développer la table des matières

Comment copier et coller des images (HTML)

[ 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

Copie d’une image dans le Presse-papiers

  1. 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) {
            ...
        }
        ...
    });
    
    
    
  2. 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));
    
    
    
  3. 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));
    
    
    
  4. Copiez le contenu de DataPackage dans le Presse-papiers.
    
    Windows.ApplicationModel.DataTransfer.Clipboard.setContent(dataPackage);
    
    

Collage d’une image à partir du Presse-papiers

  1. Récupérez le contenu du Presse-papiers sous la forme d’un objet DataPackageView.
    
    var dataPackageView = Windows.ApplicationModel.DataTransfer.Clipboard.getContent();
    
    
  2. 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");
    }
}

Rubriques associées

Démarrage rapide : fonctions de base du Presse-papiers
Comment copier et coller du contenu HTML
Comment copier et coller des fichiers
Recommandations et liste de vérification sur les commandes du Presse-papiers
DataPackage
Windows.ApplicationModel.DataTransfer
Exemple d’application utilisant le Presse-papiers

 

 

Afficher:
© 2017 Microsoft