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

Question

Hello I'm very new to JavaScript and Blazor I'm trying to upload a picture from clipboard to my website which will be converted to blob and later be stored on my database.

I have this JavaScript code which is responsible for pasting an image to an element in my razor page:

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

})();

This is how it looks in my razor page:

        <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; }

I am trying to retrieve the data from the image, whether it's the image or Base64 string and have it on my variable in the code. How do I get the image that I've pasted show up in the Image photo ?

Answer 1

Blazor has an interface IJSRuntime to call Javascript functions. A comprehensive guide can be found on official docs .

I didn't tested yet, but if you need this function to be executed on window load I think you should override the OnAfterRender or OnAfterRenderAsync life-cycle methods in Blazor and use IJSRuntime there to call it.