如何复制粘贴html,如何复制和粘贴图像 (HTML)

如何复制和粘贴图像 (HTML)

12/11/2015

本文内容

[ 本文适用于编写 Windows 运行时应用的 Windows 8.x 和 Windows Phone 8.x 开发人员。如果你要针对 Windows 10 进行开发，请参阅 最新文档 ]

用户期望通过使用剪贴板复制和粘贴图像。本主题介绍如何在你的应用中支持复制和粘贴图像。

查看我们的剪贴板示例应用以便获得介绍如何复制和粘贴其他类型数据的完整示例。

你需要了解的内容

技术

先决条件

你应当熟悉 Visual Studio 及其关联模板。

你应当熟悉 JavaScript。

将图像复制到剪贴板

检索用户要复制的图像。以下示例使用文件选取器让用户指定“图片”中的图像。若要了解有关文件选取器的详细信息，请参阅快速入门：访问文件。若要了解有关访问文件的其他方法的详细信息，请参阅访问数据和文件。

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();

dataPackage.setBitmap(Windows.Storage.Streams.RandomAccessStreamReference.createFromFile(file));

var dataPackage = new Windows.ApplicationModel.DataTransfer.DataPackage();

dataPackage.setBitmap(Windows.Storage.Streams.RandomAccessStreamReference.createFromFile(file));

将 DataPackage 的内容复制到剪贴板。

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

粘贴剪贴板中的图像

以 DataPackageView 对象的形式获取剪贴板的内容。

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

检查 DataPackageView 是否包含位图，如果包含，则检索该位图。该示例检索位图并创建一个 URL 以便用作 img 标记的 src 属性：

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

}

});

}

以下示例检索剪贴板中的图像。

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

}

}

相关主题