从 javascript 代码获取数据到 blazor 中的剃刀页面代码答案

【问题标题】：Get data from a javascript code to razor page code in blazor从 javascript 代码获取数据到 blazor 中的剃刀页面代码
【发布时间】：2021-01-01 22:47:09
【问题描述】：

您好，我是 JavaScript 和 Blazor 的新手我正在尝试将剪贴板中的图片上传到我的网站，该图片将被转换为 blob，然后存储在我的数据库中。

我有这个 JavaScript 代码负责将图像粘贴到我的剃须刀页面中的元素：

(function () {
    window.onload = function () {
        document.getElementById('txtPaste').focus();
        document.getElementById('txtPaste').onpaste = function (event) {
            var items = (event.clipboardData || event.originalEvent.clipboardData).items;
            console.log(JSON.stringify(items));
            var blob = null;
            for (var i = 0; i < items.length; i++) {
                if (items[i].type.indexOf("image") === 0) {
                    blob = items[i].getAsFile();
                }
            }
            if (blob !== null) {
                var reader = new FileReader();
                reader.onload = function (event) {
                    //console.log(event.target.result);
                    document.getElementById("imgPaste").src = event.target.result;
                    document.getElementById("hfByteData").value = event.target.result;
                };
                reader.readAsDataURL(blob);
            }
            alert(blob);
        }
    };

})();

这是它在我的剃须刀页面中的外观：

        <textarea id="txtPaste" placeholder="Paste Image Here" style="height: 100px;"></textarea>
        <img id="imgPaste" src="" />
        <input type="hidden" name="hfByteData" id="hfByteData" runat="server"/>

public Image photo { get; set; }

我正在尝试从图像中检索数据，无论是图像还是 Base64 字符串，并将其放在代码中的变量中。如何让我粘贴的图像显示在 Image photo 中？

【问题讨论】：

我不知道这段代码是否正常工作，但你有没有像这样将你的 js 文件添加到 index.html 中：<script src="xyzfile.js"></script>

标签： javascript asp.net blazor

【解决方案1】：

Blazor 有一个接口 IJSRuntime 来调用 Javascript 函数。综合指南可以在官方docs找到。

我还没有测试过，但是如果您需要在窗口加载时执行此函数，我认为您应该覆盖 Blazor 中的 OnAfterRender 或 OnAfterRenderAsync 生命周期方法并使用 IJSRuntime 调用它.

【讨论】：