So I am using mongoDB as my database and I have saved an image in mongoDB in binary format.
The image below is how the data is being displayed in my database.
I have tried the following:
<img src="data:image/jpeg;base64{<%= user.img.data %>}"/>
But the above code does not seem to work. Please note I am using EJS as a tempting engine.
After doing the inspect element on google chrome I found that the data was being shown like so:
I am not sure how to read this binary image and display it in a img tag in html.
UPDATE:
After making the changes recommended by Alex Matos in the comments I get the following output:
If you really got the images data and saved it i mongo db, you could render the image in a canvas and append it wherever you need.
// Renders the image data in a canvas off screen
var canvas = document.createElement("canvas");
var ctx = canvas.getContext("2d");
var data = ctx.putImageData(YOUR_MONGODB_DATA,0,0);
// Initializes a new image from canvas and appends it to the parent you want
var image = new Image();
image.id = "rendered-picture"
image.src = canvas.toDataURL();
document.getElementById('PARENT_ID').appendChild(image);
Try returning data from your server using base64_encode.
For example:
<?php
$picture = base64_encode(user.img.data);
<img src="data:image/jpeg;base64{<%= picture %>}"/>
?>
Related
I am trying convert an Edge Animate project to Animate CC where single images are loaded into a series of empty movie clips using a frame actions and a xml file. These movie clips are all prepositioned in a single movie clip that has an initiating action to load all the images before playing the timeline and fading up all the images in turn.
I have solved the loading of the images once I have the 'imageid' (MC instance) and 'small_url'. However, I cannot seem to get the data from the XML file into the relevant variables.
the xml is structured like this:
<images>
<imagedata ID = "image1_1">
<imageid>image1_1</imageid>
<small_url>images/small/HF0307_008.jpg</small_url>
</imagedata>
<imagedata ID = "image1_2">
<imageid>image1_2</imageid>
<small_url>images/small/HF0001_187.jpg</small_url>
</imagedata>
<imagedata ID = "image1_3">
<imageid>image1_3</imageid>
<small_url>images/small/HF0226_157.jpg</small_url>
</imagedata>
<images>
The code I have tried with no success is:
var myimageid = "theMovieClipInstanceName";
var imagedata = new XMLHttpRequest();
imagedata.addEventListener("load", imagedataF);
imagedata.open("GET", "myXMLfile", true);
imagedata.setRequestHeader("Content-Type", "text/xml");
imagedata.send();
function imagedataF(e) {
var imagedatafile = e.target.responseXML;
//from here is where I am uncertain what to do!!
//I want to identify the xml element with child[0] that = "myimageid" and then set the 'smallurl' variable to this value.
var images = imagedatafile.getElementsByTagName("imagedata");
var smallurl = images.getElementsByTagName("imageid").[0] = myimageid;
//use variable "smallurl" to load images
}
Been trying everything with no joy.
Any help would be much appreciated.
I am trying to convert a canvas to image. The code used is as follows.
var canvas = document.getElementsByTagName("canvas")[0]
var context = canvas.getContext('2d');
url = canvas.toDataURL().replace(/^data:image\/[^;]/, 'data:application/octet-stream');
window.open(url);
The above code saves the image on the downloads folder. I need to save the image on a specific folder(Eg: /home/username/Desktop/projects/MyProject1/images/).
Any ideas on how this could be done?
i'm trying to use localStorage to save an image, or multiple images for retrieval at a later date to upload to a server.
The current camera code is as follows:
function capturePhoto() {
navigator.camera.getPicture(onCameraSuccess, onCameraFail, {quality: 70, destinationType : Camera.DestinationType.DATA_URL});
}
function onCameraSuccess(imageData) {
//In our success call we want to first process the image to save in our image box on the screen.
var image = document.getElementById('image');
image.src = "data:image/jpeg;base64," + imageData;
//Create a new canvas for our image holder
var imgCanvas = document.createElement("canvas"),
imgContext = imgCanvas.getContext("2d");
// Make sure canvas is as big as the picture
imgCanvas.width = image.width;
imgCanvas.height = image.height;
// Draw image into canvas element
imgContext.drawImage(image, 0, 0, image.width, image.height);
// Get canvas contents as a data URL
var imgAsDataURL = imgCanvas.toDataURL("image/png");
// Save image into localStorage
try {
// localStorage.setItem(“savedImage”, imgAsDataURL);
localStorage.setItem("savedImage", imageData);
alert('Image Saved');
}
catch (e) {
alert("Storage failed: " + e);
}
var imageStorage = localStorage.getItem("savedImage");
// myCardHolder= document.getElementById(“m1-cardStorage-image1″);
// Reuse existing Data URL from localStorage
var imageInfo = document.getElementById('image');
imageInfo.src = "data:image/jpeg;base64," + imageStorage;
}
This triggers the camera, and the image captured is displayed into
<img id="image" src=""></img>
It also draws a canvas to output the image into. What i'm really trying to achieve is to capture the images base64 data to be able to store it into an array so that it may be uploaded/downloaded from a server.
Ideally i'd like to completely avoid having to display the image to the user, and simply store the images data
I may have misunderstood the localStorage/camera api a little, so any pointers would be great.
Does the image HAVE to be output into an element before the data can be stored? If i could just output it into the canvas that may never have to be shown, and extract the data from the canvas element?
Does the image HAVE to be output into an element before the data can be stored?
Not at all, in this case anyways. You are already receiving the image as base64 data so just store that directly.
Problems:
datauris can be chopped by the browser if too long
if not chopped by browser on string level, the data can be chopped by localstorage itself which has a size limit (i think it's currently around 5 mb for most browsers but there is no standard here)
a string uses two bytes per char so the storage is in effect the half
A better local storage is to use indexedDB.
When you read the base64 data, then you have to use an Image to show the data. Just prefix as you do with data:... etc. and remember to use correct file type.
Last year I was trying to solve the same problem, I don't have the code right now but I followed kind of the approach taken on this answer:
How to convert image into base64 string using javascript
Remember that localStorage has a limit of 5 MB, so if you save a lot of images in b64 you can reach that limit easily. (which was my case), so I had to move my storage to somewhere else, like a sqlite or something like that.
I'm attempting to consume server-side code that is owned by another team and that I can't easily change. It is processing an image and returning it via Response.BinaryWrite:
MemoryStream ms = new MemoryStream();
image.Save(ms, System.Drawing.Imaging.ImageFormat.Jpeg);
var imageToReturn = ms.ToArray();
Response.ContentType = "image/jpg";
Response.BinaryWrite(imageToReturn);
However, when I attempt to do standard client-side processing of the result, like using Javascript's btoa() to convert it from a byte array to an ArrayBuffer, I get messages like "'btoa' failed: The string to be encoded contains characters outside of the Latin1 range".
I really just want to be able to display and work with this image - so any approach that would get it to appear in a canvas, or convert it to a data URL, etc., would help me out. Am I missing something?
If you just want to display the image, why don't you just src attribute of img tag to the url of the ASP.Net page, which is writing the JPG in the in the response.
If you want to display the image in canvas, you can do it in following way
myimage = new Image();
myimage.onload = function () {
var canvas = document.getElementById('canv');
var ctx = canvas.getContext('2d');
ctx.drawImage(myimage, x, y);
}
myimage.src = '<url to the asp.net page>';
In Javascript you have the ByteArray type and some views on it as described here:
https://developer.mozilla.org/en-US/docs/JavaScript/Typed_arrays
is it possible to store image data in such bytes and if yes, how can i display such an image? png or jpg?
Yes, you can store an image using the typed arrays.
Im not sure what you want actually.
If you want to create an HTMLImageElement from a ByteArray, you can do something similar as cited in here and here.
If you want to get the bytes from an Image, that would be trickier. You can draw the ImageElement to HTML canvas, and them get the URI back using toDataURL.
I just tried to get the data using canvas and it worked.
var myCanvas = document.getElementById('my_canvas_id');
var ctx = myCanvas.getContext('2d');
var img = new Image;
img.onload = function(){
myCanvas.width = img.width;
myCanvas.height = img.height;
ctx.drawImage(img,0,0); // Or at whatever offset you like
alert(myCanvas.toDataURL());
};
img.src = "logo4w.png";
Although, the method toDataURL() do not allow you to perform this operation if the image you draw on canvas comes from outside the website domain.