0
157
ViewsCómo obtener base64 img src e insertarlo en input.files
Tengo una imagen que está en base64. Fue codificado con Convert.ToBase64String(Image) en mi controlador. Mi pregunta es, al usar JavaScript, ¿cómo puedo insertar la imagen ya cargada del elemento img en el elemento de entrada para poder recibirla en el controlador? Creo que necesito decodificarlo de alguna manera, crear un nuevo archivo de imagen y luego insertar ese archivo en input.files, pero después de numerosos intentos no pude encontrar cómo. No tengo mucha experiencia en javascript, por lo que agradecería si alguien me ayuda.
<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"/>Mi modelo de vista tiene estas 2 propiedades:
[Required] public IFormFile Image { get; set; } public string? ImageInBase64 { get; set; }Para más contexto, estoy guardando todas mis imágenes en una base de datos como byte[].
2 answers
Answer question0
No estoy seguro de haberte entendido bien. Pero puede decodificar Base64 de nuevo a la entrada usando
const reader = new FileReader(); reader.onload = (evt) => { setFile(evt.target.result); } reader.readAsDataURL(base64_here'));
0
Necesita convertir la imagen base64 en un archivo, luego usar DataTransfer para recibir el archivo. Puede probar mi código de muestra como se muestra a continuación.
@{ 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>Resultado de la prueba:
