Blazor Server端（.NET7）剪贴板图片转MemoryStream问题求助

问题根源 #

你遇到的Document is not focused错误，是因为navigator.clipboard.read()必须在用户交互的直接回调上下文中执行，且文档需处于焦点状态。原方案中通过Blazor的@onpaste事件间接调用JS剪贴板方法，脱离了浏览器认可的用户手势触发场景，导致权限或焦点校验失败。

完整实现步骤 #

1. 配置_Host.cshtml的JS脚本 #

在_Host.cshtml的</body>前添加以下脚本，直接监听全局粘贴事件并提取图片数据：

<script>
    window.setupClipboardPaste = (dotNetRef) => {
        document.addEventListener('paste', async (e) => {
            if (e.clipboardData?.items) {
                for (const item of e.clipboardData.items) {
                    // 匹配所有图片类型
                    if (item.type.startsWith('image/')) {
                        const blob = item.getAsFile();
                        const reader = new FileReader();
                        reader.onloadend = () => {
                            // 将Base64图片数据传给Blazor组件
                            dotNetRef.invokeMethodAsync('HandleClipboardImage', reader.result);
                        };
                        reader.readAsDataURL(blob);
                        e.preventDefault(); // 阻止默认粘贴行为，避免干扰
                        break;
                    }
                }
            }
        });
    };
</script>

2. Blazor组件后台代码 #

在你的Kontakt.razor.cs中修改为以下代码，实现JS与C#的交互及MemoryStream转换：

using Microsoft.AspNetCore.Components;
using Microsoft.JSInterop;
using System.IO;
using System.Text.RegularExpressions;

namespace PVApp.Pages.KontaktCollection
{
    public partial class Kontakt : ComponentBase, IDisposable
    {
        [Inject]
        public IJSRuntime JSRuntime { get; set; }

        private DotNetObjectReference<Kontakt>? _dotNetComponentRef;
        private string? PreviewImageSource { get; set; }
        private MemoryStream? ImageMemoryStream { get; set; }

        protected override async Task OnAfterRenderAsync(bool firstRender)
        {
            if (firstRender)
            {
                // 创建组件的DotNet引用，用于JS调用C#方法
                _dotNetComponentRef = DotNetObjectReference.Create(this);
                await JSRuntime.InvokeVoidAsync("window.setupClipboardPaste", _dotNetComponentRef);
            }
            await base.OnAfterRenderAsync(firstRender);
        }

        /// <summary>
        /// 由JS调用，处理剪贴板传入的图片数据
        /// </summary>
        [JSInvokable]
        public void HandleClipboardImage(string base64ImageData)
        {
            // 移除Base64前缀（data:image/png;base64,）
            var pureBase64 = Regex.Replace(base64ImageData, @"^data:image\/[a-z]+;base64,", string.Empty);
            byte[] imageBytes = Convert.FromBase64String(pureBase64);

            // 转为MemoryStream
            ImageMemoryStream?.Dispose(); // 释放旧流
            ImageMemoryStream = new MemoryStream(imageBytes);

            // 设置预览图片源
            PreviewImageSource = base64ImageData;

            // 更新组件UI
            StateHasChanged();
        }

        public void Dispose()
        {
            // 释放资源，避免内存泄漏
            _dotNetComponentRef?.Dispose();
            ImageMemoryStream?.Dispose();
        }
    }
}

3. Razor页面布局 #

修改Kontakt.razor，添加图片预览区域：

@page "/kontakt"
@implements IDisposable

<h3>剪贴板图片粘贴测试</h3>

@if (!string.IsNullOrEmpty(PreviewImageSource))
{
    <div class="mt-3">
        <h4>预览图片：</h4>
        <img src="@PreviewImageSource" style="max-width: 600px; max-height: 400px; border: 1px solid #ddd; padding: 8px;" />
    </div>
}

<p class="mt-4">复制图片后，在页面任意位置粘贴即可获取图片流</p>

关键优化点 #

• 直接监听粘贴事件：JS代码在用户粘贴的直接回调中处理剪贴板数据，符合浏览器权限策略，避免焦点或权限错误。
• 支持所有图片类型：通过item.type.startsWith('image/')匹配png、jpg等所有图片格式。
• 资源释放：实现IDisposable接口，释放DotNetObjectReference和MemoryStream，防止内存泄漏。
• 实时预览：同步生成预览图片，方便验证结果。

内容的提问来源于stack exchange，提问作者Peter Schwennesen