Data:image

JavaScript
1

Instead of a src image name (loc)
How can i add a data:url blob back into the both the src image and populate the input field with the blob.

Is this even possible??

So the array could contain either loc = “…/images/some.jpg”
or
loc = “data:image/jpeg;base64,/9j/4QAYRXhpZgAASUkqA”

var aimg = $(‘’).attr(“class”,“uploaded”).attr(“id”,“image” + n);
aimg.attr(“src”,loc).width(newW).height(newH);

var ainput = $(‘’).attr(“type”,“file”).attr(“name”,“images”).attr(“onchange”,nextURL).attr(“class”,“uploader”).attr(“id”,“img” + n).attr(“accept”, “.jpg, .jpeg, .png, .gif”);
adiv.append(aimg).append(ainput);

2

Is there a particular reason why you are setting up your elements this way and not just using something like…

// Step 1: Create the image element
const imgElement = document.createElement("img");

// Step 2: Set the src attribute (replace with your image URL or data URL)
imgElement.src = "data:image/jpeg;base64,/9j/4QAYRXhpZgAASUkqA";

// Step 3: Set additional attributes
imgElement.alt = "A description of the image";
imgElement.width = 300; // width in pixels
imgElement.height = 200; // height in pixels

// Step 4: Append the image to a container (e.g., body or another element)
adiv.appendChild(imgElement);

You can do likewise for the input… of course, like we mentioned in the other post, not load it into a file input element.

3

Yes, it is definitely possible to use a data URL blob in the src attribute of an image as well as populate an input field with the blob data. Here’s how you can modify your existing code to accommodate both scenarios, whether you’re working with a traditional image URL or a data URL blob.
// Assuming loc is either a traditional URL or a data URL
var loc = “data:image/jpeg;base64,/9j/4QAYRXhpZgAASUkqA”; // Example data URL

var aimg = $(‘’).attr(“class”, “uploaded”).attr(“id”, “image” + n);
aimg.attr(“src”, loc).width(newW).height(newH);

// For the input field, you can set a data attribute to hold the blob
var ainput = $(‘’)
.attr(“type”, “file”)
.attr(“name”, “images”)
.attr(“onchange”, nextURL)
.attr(“class”, “uploader”)
.attr(“id”, “img” + n)
.attr(“accept”, “.jpg, .jpeg, .png, .gif”);

// If loc is a data URL, you can store it in the input field’s data attribute
if (loc.startsWith(“data:image/”)) {
ainput.attr(“data-blob”, loc); // Store the blob data in a custom data attribute
}

adiv.append(aimg).append(ainput);

  • Image Creation: The code creates an image element and sets its src attribute to either a standard URL or a data URL blob.
  • Input Field: The input field is created to accept file uploads. If the loc variable contains a data URL, it stores that URL in a custom data attribute (like data-blob). This allows you to easily retrieve the blob data later.
  • Usage: You can access the blob data from the input field whenever needed, using:
  • var blobData = ainput.data(‘blob’);
4

There is a lot going on with the entire script so mainly use variables to setup the dom, sometimes they are used and sometimes not depending on what else is happening with the page. I haven’t shown the full script.
Also I can sometimes re-use the code very quickly elsewhere and not worry about changing certain elements.

5

Okay seems like what I need,

Thanks

6

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.