如何使用 blazor 读取剪贴板？

我正在使用具有截屏功能的 Blazor Server 应用程序。我的目标是从剪贴板获取数据，我谈论的不仅是简单的文本，而且总体上是一些图像、文件、文本等。

我有一个名为ClipboardService它使用Microsoft.JSInterop，我知道你可以这样做来获取短信

public ValueTask<string> ReadTextAsync() {
    return _jsRuntime.InvokeAsync<string>("navigator.clipboard.readText");
}

你可以使用类似的东西navigator.clipboard.read但它返回我认为对于我的情况来说是一个空数组。尝试复制图像并将其从 blazor 应用程序发送给查看器，但它无法按照我期望的方式工作。

剪贴板服务：

using Microsoft.JSInterop;

public sealed class ClipboardService
{
    private readonly IJSRuntime _jsRuntime;

    public ClipboardService(IJSRuntime jsRuntime)
    {
        _jsRuntime = jsRuntime;
    }

    public ValueTask<string> ReadTextAsync()
    {
        return _jsRuntime.InvokeAsync<string>("navigator.clipboard.readText");
    }

    public ValueTask WriteTextAsync(string text)
    {
        return _jsRuntime.InvokeVoidAsync("navigator.clipboard.writeText", text);
    }
}

有人遇到过熟悉的事情吗？

用于管理文本内容通过Clipboard API你应该使用readText https://developer.mozilla.org/en-US/docs/Web/API/Clipboard/readText / 写文本 https://developer.mozilla.org/en-US/docs/Web/API/Clipboard/readText, but 对于图像它应该是read https://developer.mozilla.org/en-US/docs/Web/API/Clipboard/read / write https://developer.mozilla.org/en-US/docs/Web/API/Clipboard/write.

For 对于文本内容您可以使用该服务，例如杰拉尔德·巴雷的例子 https://www.meziantou.net/copying-text-to-clipboard-in-a-blazor-application.htm:

@page "/"
@inject ClipboardService ClipboardService

<h1>Demo Clipboard!</h1>

<button @onclick="ReadFromClipboard">Read from clipboard</button>
<button @onclick="CopyToClipboard">Copy to clipboard</button>
@text

@code {
    string text;

    async Task ReadFromClipboard()
    {
        // Reading from the clipboard may be denied, so you must handle the exception
        try
        {
            text = await ClipboardService.ReadTextAsync();
        }
        catch
        {
            Console.WriteLine("Cannot read from clipboard");
        }
    }

    async Task CopyToClipboard()
    {
        // Writing to the clipboard may be denied, so you must handle the exception
        try
        {
            await ClipboardService.WriteTextAsync("https://www.meziantou.net");
        }
        catch
        {
            Console.WriteLine("Cannot write text to clipboard");
        }
    }
}

You can 处理图像的读/写操作类似的方式 - 例如通过DOM 画布到Blob https://html.spec.whatwg.org/multipage/canvas.html#dom-canvas-toblob。作为起点，请参阅克里斯蒂安·利贝尔发表的文章 https://www.thinktecture.com/en/pwa/making-of-paint-js-copy-paste/如何互动Clipboard API将图像复制到剪贴板或从剪贴板粘贴。

附加链接：

• 对于混合内容，我建议仔细看看如何处理ClipboardItem in this https://web.dev/async-clipboard/#handling-multiple-mime-types post: 解锁剪贴板访问 https://web.dev/async-clipboard/#handling-multiple-mime-types作者：杰森·米勒和托马斯·斯坦纳

• 阅读 API 的精彩概述 -剪贴板API https://developer.mozilla.org/en-US/docs/Web/API/Clipboard_API并已弃用文件.exec命令 https://developer.mozilla.org/en-US/docs/Web/API/Document/execCommand- 用于与剪贴板交互在 Blazor 中复制到剪贴板 https://chrissainty.com/copy-to-clipboard-in-blazor/克里斯·桑蒂发表的文章。