Convert Base64 to Image in JavaScript/Jquery

how to convert base64 to image by using jquery?

var base64_string = "/9j/4AAQSkZJRgABAgAAAQABAAD//...";
var img = document.createElement("img");
// added `width` , `height` properties to `img` attributes
img.width = "250px";
img.height = "250px";
img.src = "data:image/png;base64," + base64_string;
var preview = document.getElementById("img_preview");
preview.appendChild(img);

Add image into div and convert base64 string into thumbnail using jQuery

Edit, Updated

Try

js

var base64_string = "/9j/4AAQSkZJRgABAgAAAQABAAD//...";
var img = document.createElement("img");
// added `width` , `height` properties to `img` attributes
img.width = "250px";
img.height = "250px";
img.src = "data:image/png;base64," + base64_string;
var preview = document.getElementById("img_preview");
preview.appendChild(img);

js (jquery library)

$("<img>", {
  "src": "data:image/png;base64," + base64_string,
  // added `width` , `height` properties to `img` attributes
  "width": "250px", "height": "250px"})
.appendTo("#img_preview");

var base64_string = "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";

    $("<img>", {      "src": "data:image/png;base64," + base64_string,      "width": "250px", "height": "250px"})    .appendTo("#img_preview");

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script><div id="img_preview" style="width:250px; height:250px;"></div>

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

You need convert base64 image to file, then use DataTransfer to recivie the file. You can try my sample code like below.

@{
    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://learn.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>

Test Result:

How to convert a base64 string into a file?

It seems like the missing 'brick' in your code is a function that would take a base64-encoded image and convert it to a Blob.

So, I'm going to focus on that part exclusively with a short comment for each step.

The following function expects a string such as:

data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAMCAgICA...

function base64ImageToBlob(str) {
  // extract content type and base64 payload from original string
  var pos = str.indexOf(';base64,');
  var type = str.substring(5, pos);
  var b64 = str.substr(pos + 8);

  // decode base64
  var imageContent = atob(b64);

  // create an ArrayBuffer and a view (as unsigned 8-bit)
  var buffer = new ArrayBuffer(imageContent.length);
  var view = new Uint8Array(buffer);

  // fill the view, using the decoded base64
  for(var n = 0; n < imageContent.length; n++) {
    view[n] = imageContent.charCodeAt(n);
  }

  // convert ArrayBuffer to Blob
  var blob = new Blob([buffer], { type: type });

  return blob;
}

---

Related Topics