如何获取base64 img src并将其插入input.files

Question

我有一张 base64 格式的图像。它在我的控制器中用 Convert.ToBase64String(Image) 编码。我的问题是，通过使用 JavaScript，如何将已加载的图像从 img 元素插入到输入元素中，以便我可以在控制器中接收它。我想我需要以某种方式对其进行解码，创建一个新的图像文件，然后将该文件推送到 input.files，但经过多次尝试后我找不到方法。我在javascript方面经验不多，所以如果有人能帮助我，我将不胜感激。

<img id="mainImage" src="data:image;base64,@Model.ImageInBase64">

<input asp-for="Image" id="mainImageInput" style="display:none" type="file" onchange="readURL(this,'mainImage')" accept="image/jpeg, image/png" class="form-control"/>

我的视图模型有这两个属性：

    [Required]
    public IFormFile Image { get; set; }
    public string? ImageInBase64 { get; set; }

为了了解更多上下文，我将所有图像保存在数据库中作为 byte[]。

Answer 1

我不确定我是否理解正确。但是您可以使用

将 Base64 解码回输入

const reader = new FileReader();  
     reader.onload = (evt) => {  
         setFile(evt.target.result);  
     }
reader.readAsDataURL(base64_here'));

Answer 2

您需要将base64图像转换成文件，然后使用DataTransfer接收文件。您可以像下面这样尝试我的示例代码。

@{
    ViewData["Title"] = "Home Page";
}
@model Net5_MVC.Controllers.HomeController.mainImageInput
<script src="https://code.jquery.com/jquery-3.6.0.js" integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous"></script>
<script>
    function dataURLtoFile(dataurl, filename) {

        var arr = dataurl.split(','),
            mime = arr[0].match(/:(.*?);/)[1],
            bstr = atob(arr[1]),
            n = bstr.length,
            u8arr = new Uint8Array(n);

        while (n--) {
            u8arr[n] = bstr.charCodeAt(n);
        }

        return new File([u8arr], filename, { type: mime });
    }
    function ConvertClick(base64url) {
        var file = dataURLtoFile(base64url, "test.png");
        let container = new DataTransfer();
        container.items.add(file);
        document.querySelector('#mainImageInput').files = container.files;
        var newfile = document.querySelector('#mainImageInput').files[0];
    }
</script>

<div class="text-center">
    <h1 class="display-4">Welcome</h1>
    <p>Learn about <a href="https://docs.microsoft.com/aspnet/core">building Web apps with ASP.NET Core</a>.</p>
</div>

<img id="mainImage" style="width:200px;height:160px" src="@Model.ImageInBase64">

<input asp-for="Image" id="mainImageInput" style="display:none" type="file" accept="image/jpeg, image/png" class="form-control" />
<button onclick="ConvertClick('@Model.ImageInBase64')">Convert</button>

测试结果：

如何获取base64 img src并将其插入input.files

How to get base64 img src and insert it into input.files

javascript

jquery

asp.net

asp.net-mvc

asp.net-core