In my electron/vue app i recieve images as Bytes from a python backend.
I collect all the bytes and trying to convert it to base64
let buff = new Buffer(imageBytes);
let base64data = buff.toString('base64');
this.emitter.emit('livestream', base64data);
in my viewrenderer I set the livestream vue data
ipcRenderer.on('livestream', (event, data: any) => {
app.livestream = `data:image/bmp;base64,${data}`;
});
and I bind it to the img tag in the HTML
<img v-bind:src="livestream" class="livestreamElement" id="livestreamElement">
But it doesn't work, I get no image to the tag to be displayed at all.
Any suggestions? Am I doing something wrong or is there any better solution for this?
I was trying to encrypt image and video src by converting into base 64 encoded value. I had taken reference from https://www.iandevlin.com/blog/2012/09/html5/html5-media-and-data-uri
Following is my html code:
<!DOCTYPE html>
<html>
<body>
<video style="width: 640px; height: 360px;" onloadstart="" id="mediaplayer" oncontextmenu="return false;" controls preload src="" poster=""/>
</body>
<script src="https://code.jquery.com/jquery-3.1.1.js"></script>
<script>
// To access player after its creation through jQuery use:
var videoSrc = 'http://clips.vorwaerts-gmbh.de/VfE_html5.mp4';
var imageSrc = 'http://www.w3schools.com/images/w3html5.gif';
var playerObj = $('#mediaplayer')[0];
var encodedSrc = btoa(playerObj.src);
var decodedSrc = atob(encodedSrc);
var playerObjPoster = playerObj.poster;
console.log(decodedSrc);
playerObj.src = "data:video/mp4;base64,"+btoa(videoSrc);
//playerObj.src = videoSrc;
playerObj.poster = 'data:image/gif;base64,'+btoa(imageSrc);
//playerObj.poster = imageSrc;
</script>
</html>
On runtime image and video src is showing as encoded value but neither image and neither video is displayed on the web page.
Any suggesstions ?
It does not work like this. You must base64 encode the actual contents of the file, not the path to the file. The link you used actually shows this in the example:
function getEncodedVideoString($type, $file) {
return 'data:video/' . $type . ';base64,' . base64_encode(file_get_contents($file));
}
Currently what is happening is that the browser is trying to use the decoded value (whis is a URI) as the actual image or video data and of course it fails.
I am creating an image dynamically on the page using dataURL,
var aImg = document.createElement('img');
aImg.setAttribute('src', dataURL);
aImg.setAttribute('alt', 'pic');
aImg.setAttribute('width', '438px');
aImg.setAttribute('height', '267px');
aImg.onclick = (function() {
//download the image object
})();
I am not sure what to do to download this image object that is a PNG image.
Can someone give hints?
If you want the image to be displayed the follwing should be fine :
aImg.src = YOUR_URL
if you want to save it on to the file , you shoud redirect and let the browser take care of the rest. JS redirect can be done as follows :
window.location.replace(dataURL)
If you want the browser to give a pop-up saying "Save File" check out this link : http://muaz-khan.blogspot.in/2012/10/save-files-on-disk-using-javascript-or.html
Recently i learned that i can display images in a web page without referencing an image URL as follows :
<img class="disclosure" img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJCAYAAADgkQYQAAAAAXNSR0IArs4c6QAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAd0SU1FB9oIGRQbOY8MjgMAAABVSURBVBjTfc6xDcAwCETRM0rt5nbA+49j70DDAqSLsGXyJQqkVxxwNOeMiEA+waW1VuT/inrvG7wikht8UETy2ygVMjO4O8YYTf6AqrZyUwYlygAAXo+QLmeF4c4uAAAAAElFTkSuQmCC">
I had another small bmp image that i wanted to display, so i opened it in vim and the img source looke like:
When i paste this code where it needs to be pasted i only get "BMڀ"
How to i convert/paste this code properly to be used as an image source?
You need to encode it in Base64
http://www.motobit.com/util/base64-decoder-encoder.asp
Also you have to change (png) in...
<img src="data:image/png;base64,
according to image filetype.
Here is a little PHP function, haven't tested it.
function encode64($file){
$extension = explode(".", $file);
$extension = end($extension);
$binary = fread(fopen($file, "r"), filesize($file));
return '<img src="data:image/'.$extension.';base64,'.base64_encode($binary).'"/>';
}
echo encode64("test.bmp");
2.
function encode64($file){
$binary = fread(fopen($file, "r"), filesize($file));
return(base64_encode($binary));
}
echo '<img src="data:image/bmp;base64,'.encode64("test.bmp").'"/>';
Tested my second function... works great... http://debconf11.com/so.php
You can use online utilities like
http://software.hixie.ch/utilities/cgi/data/data
or
http://www.sveinbjorn.org/dataurlmaker
for the conversion.
To get the Base64 encoding of your image, you can use imagemagick's convert command with the INLINE: output format.
For example:
convert YourImage.png INLINE:PNG:YourImage_base64.txt
Now all you have to do in your HTML page is add <img src=" and "> around the content of the "YourImage_base64.txt" file.
Or you can directly write it all to STDOUT and add it directly at the end of your HTML file:
echo "<img src=\"$(convert YourImage.png INLINE:PNG:-)\">" >> some.html
The image data must be base64 encoded.
I'm very new to Grails so there's probably a very simple answer to this question. I'm trying to display a dynamically created image in a gsp. The image is NOT stored in a database, it's created on the fly in the controller.
What I essentially have is one gsp that has a form which takes in a set of user inputs (requestGraph.gsp). Upon submitting the form, the parameters are sent to the a displayGraph action in the controller which queries information from a database completely outside of Grails and creates a chart using the JFreeChart library. I would like to display this image within a displayGraph.gsp or something like that.
So basically within requestGraph.gsp I have a snippet similar to:
<g:form action="displayGraph">
<!-- ... bunch of labels and boxes -->
<g:submitButton name="displayGraph" value="Display Graph" />
</g:form>
Within the controller I have something like:
def requestGraph = {}
def displayGraph = {
//... code that uses params to make an image byte array and assigns to var img
return [image : img]
}
Within displayGraph.gsp:
<body>
<h1>Graph Title</h1>
<!-- ??? How to dislpay image? -->
</body>
I tried piping the image directly to the output stream in the displayGraph action. This works, but then I lose control of all page formatting in displayGraph.gsp.
Most tutorials I've found create a dedicated action to pipe the image to an output steam then call that action using a tag. The problem is that my image isn't stored in a database and I see no way of passing the image byte array (or even the form parameters) to create/render the image. Can anybody help me with this? Thanks.
If you write the bytes to the output stream, you can treat the controller/action as the source of the image in your GSP. Here's a quick, untested example:
// controller action
def displayGraph = {
def img // byte array
//...
response.setHeader('Content-length', img.length)
response.contentType = 'image/png' // or the appropriate image content type
response.outputStream << img
response.outputStream.flush()
}
You could then access your image in the src of an <img> tag like this:
<img src="${createLink(controller: 'myController', action: 'displayGraph')}"/>
Update:
After reading your question again, this may or may not work - it looks like you might be displaying the graph as the result of a form submission. This will only work if you're storing the state on the server somewhere (instead of just getting it from the one request where the form is submitted). If you do store enough state on the server to generate the graph, then you'd have to provide some additional parameters to your controller to get the correct image, e.g. src="${g.link(controller: 'myController', action: 'displayGraph', params: ['id': 1234])}", where id is how you retrieve the graph state.
The following code works in Grails 2.x.
HomeController.groovy
class HomeController {
def index() {
}
def viewImage(){
def file = new File(params.title)
def img = file.bytes
response.contentType = 'image/png' // or the appropriate image content type
response.outputStream << img
response.outputStream.flush()
}
}
views/home/index.jsp
<%# page contentType="text/html;charset=ISO-8859-1" %>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"/>
<meta name="layout" content="main"/>
<title>View Image</title>
</head>
<body>
<div class="body">
<img src="<g:createLink controller="home" action="viewImage"
params="[title: 'C:/pictures/myimage.png']"/>"/>
</div>
</body>
</html>
I believe it's not about Grails but about HTML. You could:
Make the dedicated action that pipes image accept certain parameters, and generate the image in that action;
Embed it base64-encoded into HTML, like here:
<img src="data:image/gif;base64,R0lGODlhUAAPAKIAAAsL...etc..." alt="wow" />
my suggestion actually has two parts.
1) Use the solution recommend by Rob above to generate the chart artifact, however save it to a static file with a unique identifier that is passed back as part of the response from the form submit, then rendering the chart is no different then rendering any other image.
i would suggest that the identifer be constructed from the specifif params passed in on the form submit so they can be used as a caching mechanism to render the chart again without rebuilding it
2) create a service, maybe a Quartz Service, that periodically cleans up the static charts that were created for the application
Just an improvement to #Rob's answer:
Another option which is a bit nicer, you can just render the image, straight from your controller's action:
// controller action
def displayGraph = {
def img // a byte[], File or InputStream
render(file: img, contentType: 'image/png')
}
See also: http://grails.org/doc/latest/ref/Controllers/render.html
For any reasons the above solutions does not display any image. I used:
<img src='${createLink(controller: "myController", action: "displayGraph")}' />
instead.
I used FileUploadService to save the Image file In Grails .If you getting images from directory means, try this:
<img style="height: 120px;width: 102px;"src="${resource(dir:'personImages', file: personalDetailsInstance.id + '.png')}" />
Your gsp:
<img src="${createLink(controller: "image", action: "draw")}" />
Your controller:
def draw() {
byte[] imageInBytes = imageService.getImageInBytes() //should return byte array
response.with{
setHeader('Content-length', imageInBytes.length.toString())
contentType = 'image/jpg' // or the appropriate image content type
outputStream << imageInBytes
outputStream.flush()
}
}