Am developing an application with Titanium. I need to convert base64 string which i would be getting from JSON to an image.
Your help would be greatly appreciated.
You can just create an img element and change its src with the required data:
<img src="data:image/png;base64,iVBORw0KGgoAAAANS..." />
For Titanium, you use the built in conversion utility Titanium.Utils.base64decode:
var imageFromBase64 = Titanium.UI.createImageView({
image : Titanium.Utils.base64decode("iVBORw0KGgoAAAANS..."),
});
This converts a base64 string to a blob, which can be used in an ImageView.
Related
Does anyone have an idea of what this is?
base64 / binary / hex??
This is an image data, but I don't know how to display it.
OMIT THIS STRING as it's manually added: data:image/png; base64,
Try using JavaScript's image object. Like this:
let base64Img = new Image();
base64Img.src = "data:image/png;base64,*rest of data here*...";
And then you can put that image object into your HTML something like this:
document.querySelector(*yourCSSselector*).appendChild(base64Img);
Edit: You said it wasn't working so I looked into it a bit more.
I encoded this image: https://i.picsum.photos/id/78/536/354.jpg
Using the tool at https://www.base64-image.de/
I then made a codepen to display that image in a simple HTML file: https://codepen.io/seancowan-dev/pen/jOEdJvy?editors=1011
new Image(); should work if you are passing it a correctly formatted Data URI. So lets take a look at what is in your URI to make sure it is properly formatted base64.
Can you screenshot a console.log(base64Img) so we can see what's in there?
I wanted to convert a image file into JSON object in javascript.
So I have converted image into a string using base64 encoding.
How to convert this string to JSON object?
Simple, set value to an keyObj.
var base64String = 'data:image/png;base64....'
var imgObj = {
url: base64String
}
<img src=''+ imgObj.url +''/>
I would create a new Image() and set the src to the image. Then onload of the image, draw it to a canvas (which can be in memory, doesn't need to be in the DOM), and from there use toDataURL(). See this page for more details: https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/toDataURL
A while back I posted a question regarding decoding a Base64 string into a image to store in my ColdFusion application. Here's the link.
I was getting the string from a Topaz signature pad that had an NAPI browser plugin that created the Base64 string. I would then take that string and use the following code to decode it:
<cfscript>
binaryValue = binaryDecode( form.SigImgData, "hex" );
FileWrite("c:\Inetpub\wwwroot\signatures\#fullfilename#.bmp", "#binaryValue#");
</cfscript>
I would then store it to disk and display it in the browser using the tag.
Well now that Google Chrome has discontinued support for NAPI plugins, I am now creating the Base64 string using JavaScript supplied from the signature pad manufacturer. I can successfully create the Base64 string using the new JS but when I plug the string into my same CFScript code from above, it creates a non-usable image. Basically a corrupted image file.
Here is an example of my Base64 string:
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
I found a site that allows you to past a string into a box and decode it to the original image and it seems to decode it fine.
As per the suggestions, I have tried the following modification:
<cfset image = imageReadBase64("data:image/bmp;base64,form.SigImgData")>
<cfimage
source="#image#"
destination="c:\Inetpub\wwwroot\signatures\#fullfilename#.bmp"
action="write">
But I receive the following error:
Can not decode string "form.SigImgData".
The input string is not base64-encoded.
As your binary data doesn't have image headers(Contains Mime type e.g. data:image/png;base64 for png image) so you can simply use imageReadBase64 like this:
<cfset image = imageReadBase64(form.SigImgData)>
<cfimage
source="#image#"
destination="c:\Inetpub\wwwroot\signatures\#fullfilename#.bmp"
action="write">
I tried it locally with same code. Is this your image?
With a Base64 string you can use this function to get an image:
ImageReadBase64(yourstring)
Example:
<cfset image = ImageReadBase64(form.SigImgData)>
<cfimage source="#image#" destination="C:\Inetpub\wwwroot\signatures\#fullfilename#.bmp" action="write">
edit
so it looks like i have to somehow convert an image to
https://developer.mozilla.org/en/DOM/CanvasPixelArray
serverside
my current attempts have been to *
Pass a base64 encoded image from the server ... then converting it to binary with atob()
but then i get stuck trying to draw this onto a canvas without having to do something like
var i = new Image();
i.onload = function(){.....}
i.src = "base64 string"
So an even more general statement
I am trying to bypass creating a Image object by any means to display a new image
If your goal is to avoid the use of javascript and to simply embed the image in your page, you can simply do
<img src="data:image/png;base64,UhhIaminbase64...">
If your base64 is obtained dynamically in ajax, then the way to use the decoding library is to create an Image object with the code you made.
An alternate solution would be to send directly the RGB values in a binary array (base64 encoded if you use json) and to iterate client-side on this array in order to change your canvas' imageData. That seems easy enough but somewhat inefficient as you wouldn't have the compression of PNG or JPEG.
With html5 you can do so:
<script>
window.onload = function()
{
var img = new Image();
img.src = "data:image/png;base64,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";
document.body.appendChild(img);
};
</script>
Here is a working example: http://jsfiddle.net/4ZaUu/3/
How to send a jpg image as ByteArray from as3 to javascript? And how to convert ByteArray to image in javascript?
Take your DisplayObject (Sprite/MovieClip/whatever) and convert it to a BitmapData:
myBitmapData.draw(mySprite);
Convert that to a PNG using adobe's AS3CoreLib
myByteArray = PNGEncoder.encode(myBitmapData);
Convert that to Base64 using Flex's Base64Encoder:
myBase64Encoder.encodeBytes(myByteArray);
Then export actionscript variables to Javascript using ExternalInterface.
The JavaScript and DOM implementations of current web browsers don't really have good mechanisms for doing this sort of thing.
Your best bet is to have your AS3 return a DATA protocol URI with a base64-encoded version of the image. Modern browsers (IE8+, FF2+, etc) will accept a DATA URI as the SRC of an IMG tag and will render the image contained therein.
http://en.wikipedia.org/wiki/Data_URI_scheme
You'll have to have a AS3 expert explain how to turn an byte-array into a base64-encoded string, but it cannot be that hard.
There is a method in this class that does that:
https://github.com/monkeypunch3/flexcapacitor/blob/master/MainLibrary/src/com/flexcapacitor/utils/DisplayObjectUtils.as
calling
var data:String = DisplayObjectUtils.getBase64ImageDataString();
will return this string:
data:image/png;base64,...
You then set the src of an img in html to that value.