Kopieren und Einfügen von Bildern
Inhaltsverzeichnis reduzieren
Inhaltsverzeichnis erweitern

So wird’s gemacht: Kopieren und Einfügen von Bildern (HTML)

[ Dieser Artikel richtet sich an Windows 8.x- und Windows Phone 8.x-Entwickler, die Windows-Runtime-Apps schreiben. Wenn Sie für Windows 10 entwickeln, finden Sie weitere Informationen unter neueste Dokumentation]

Benutzer erwarten, dass sie Bilder über die Zwischenablage kopieren und einfügen können. In diesem Thema wird dargestellt, wie Sie Unterstützung zum Kopieren und Einfügen von Bildern in Ihre App integrieren.

In der Beispiel-App zum Einfügen in die Zwischenablage finden Sie ausführliche Beispiele, die das Kopieren und Einfügen anhand anderer Datentypen verdeutlichen.

Wissenswertes

Technologien

Voraussetzungen

Kopieren eines Bilds in die Zwischenablage

  1. Abrufen eines Bilds, das der Benutzer kopieren möchte Im folgenden Beispiel wird die Dateiauswahl verwendet, um den Benutzer ein Bild aus "Bilder" auswählen zu lassen. Weitere Informationen zur Dateiauswahl finden Sie unter Schnellstart: Dateizugriff mit Dateiauswahl. Weitere Informationen über andere Methoden zum Dateizugriff finden Sie unter Zugreifen auf Daten und Dateien.
    
    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. Erstellen Sie das DataPackage-Objekt. Rufen Sie ein RandomAccessStreamReference-Objekt ab, das die Bilddaten aus der ausgewählten Datei darstellt, und fügen Sie die Dateien hinzu.
    
    var dataPackage = new Windows.ApplicationModel.DataTransfer.DataPackage();
    dataPackage.setBitmap(Windows.Storage.Streams.RandomAccessStreamReference.createFromFile(file));
    
    
    
  3. Rufen Sie ein RandomAccessStreamReference-Objekt ab, das das Bild in der ausgewählten Datei darstellt. Fügen Sie dem DataPackage-Objekt den Bilddatenstrom mithilfe der setBitmap-Methode hinzu.
    
    var dataPackage = new Windows.ApplicationModel.DataTransfer.DataPackage();
    dataPackage.setBitmap(Windows.Storage.Streams.RandomAccessStreamReference.createFromFile(file));
    
    
    
  4. Kopieren Sie den Inhalt von DataPackage in die Zwischenablage.
    
    Windows.ApplicationModel.DataTransfer.Clipboard.setContent(dataPackage);
    
    

Einfügen eines Bilds aus der Zwischenablage

  1. Rufen Sie die Inhalte als DataPackageView-Objekt aus der Zwischenablage ab.
    
    var dataPackageView = Windows.ApplicationModel.DataTransfer.Clipboard.getContent();
    
    
  2. Überprüfen Sie, ob DataPackageView eine Bitmap enthält, und rufen Sie sie ggf. ab. In diesem Beispiel wird die Bitmap abgerufen und eine URL zur Verwendung als src-Attribut eines img-Tags erstellt:
    
    
    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");
        }
        ....
    }
    
    

Vollständige Beispiele

In diesem Beispiel wird dargestellt, wie ein per Dateiauswahl vom Benutzer ausgewähltes Bild kopiert wird.


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

Im folgenden Beispiel wird ein Bild aus der Zwischenablage abgerufen.


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

Verwandte Themen

Schnellstart: Grundlagen zur Zwischenablage
Kopieren und Einfügen von HTML
Kopieren und Einfügen von Dateien
Richtlinien und Prüfliste für Befehle für die Zwischenablage
DataPackage
Windows.ApplicationModel.DataTransfer
Beispiel-App zum Einfügen in die Zwischenablage

 

 

Anzeigen:
© 2017 Microsoft