In order to upload a base64 image to the webpage using javascript, it is possible to create img tag and add base64 image to its src property. Therefore, there is no need to keep them at any of the file paths on the client as one can simply display the image by adding the base64 data url to the image s attribute yes, the image can be displayed with out any file path being used.
Here’s how you can adjust your code:
Step 1: Capture the Image and Show It
Having said that, after you capture the image, the base 64 data should be assigned to the src of an img tag.
function capture_image() {
alert("capture_image");
var p = webcam.capture();
webcam.save();
alert("capture complete " + p); // returns true here
var img = canvas.toDataURL("image/png");
// Create a new image element
var imgElement = document.createElement("img");
imgElement.src = img;
// You may also want to add this image to the DOM to make it visible
document.body.appendChild(imgElement);
alert("Image can now be captured and displayed.");
}
Step 2: Making Use of Image Path (which is base64 Data)
Since the given base64 string encodes the complete image, it can be used directly in as the image source for src, image tag, canvas or any other tag.
Need for clarification:
Here, the line imgElement.src = img; sets the image source property of image element with id imgElement to the base64 data, which allows the browser to render it as an image.
document.body.appendChild(imgElement); inserts the image in to the document body hence making it appear on the web page.
This method lets you display the image even without saving it in the file system or having to specify any file path.
Back