时间戳

首页 > 解决方案 > 从 javascript 代码获取数据到 blazor 中的剃刀页面代码

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

问题描述

您好，我对 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?

标签： javascriptasp.netblazor

解决方案

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

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

推荐阅读