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.
Related
I'm using the following method to convert files into base64 encoding and it's been working fine for a long time, but I see now that Buffer is depricated.
// function to encode file data to base64 encoded string
function base64_encode(file) {
var bitmap = fs.readFileSync(file);
// convert binary data to base64 encoded string
return new Buffer(bitmap).toString("base64");
}
let base64String = base64_encode("Document.png");
Can someone please help me modify this to work with the new suggested method as I'm not sure how to modify it myself?
Thank you so much in advance.
It is not Buffer that is deprecated but its constructor, so instead of new Buffer() you use e.g. Buffer.from.
However fs.readFileSync already returns a Buffer if no encoding is specified, so there is not really a need to pass that to another buffer. Instead you can do return fs.readFileSync(file).toString("base64")
Using the Sync part of the API is most of the time something would like to avoid and if possible switch over to the promise-based API.
As you know & stated in w3 it is possible to create a url for a Blob object in javascript by using Blob's createObjectUrl. On the other hand, if we have a data as a Base64 encoded string we can present it as a Url with the format "data[MIMEType];base64,[data>]".
Let's suppose that I have a base64 encoded string that was generated from an image that is very popular on these days :) "The red dot" image in wikipedia.
var reddotB64 = "iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg";
I'm 100% sure that if I create a URL conforming the Data URI Scheme as stated above, then, I'll be able to put a link element and download it from the browser: please see the code example below:
var reddotB64 = "iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg";
var reddotLink = document.createElement("a");
reddotLink.target = "_blank";
reddotLink.href = "data:image/png;base64," + reddotB64;
document.body.appendChild(reddotLink);
reddotLink.click();
document.body.removeChild(reddotLink);
This works prettywell and displays the image in a new tab. On the other hand I'll try to create the link by using Blob as follow:
var reddotB64 = "iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg";
var reddotBlob = new Blob([atob(reddotB64)], { type: 'image/png' });
var reddotLink = document.createElement("a");
reddotLink.target = "_blank";
reddotLink.href = URL.createObjectURL(reddotBlob);
document.body.appendChild(reddotLink);
reddotLink.click();
document.body.removeChild(reddotLink);
This code is decoding base64 encoded string variable reddotB64 via atob function. And then, creating a Blob object and continues with URL.createObjectURL function. In that case, since I've decoded reddotB64 from base64 to binary and created a Blob of type image/png and then create object url from that I expect it to work but it's not working.
Do you have a clue why it's not working? Or am I missing anything on the standards? Or doing something wrong in Javascript?
Here is the answer. Looks like it is an encoding issue. In order to convert/decode Base64 string to binary(UInt8Array/byte) using atob is not enough. After using atob it is required to use UTF-16 character code: and we achieve this by using charCodeAt function for every character in the decoded string. As a result we get UTF-16 encoded binary string which is definately working. Just create a Blob and then call URL.createObjectURL.
I have a web socket server on tomcat 8 with the following binary use:
sess.getBasicRemote().sendBinary(bf);
where bf is a simple image to bytes conversion as follows:
BufferedImage img = ImageIO.read(...);
ByteArrayOutputStream baos = new ByteArrayOutputStream();
ImageIO.write( img, "png", baos );
ByteBuffer bf = ByteBuffer.wrap(baos.toByteArray());
this code ends up in the the client side (javascript) as a blob and eventually rendered as an image in the browser and this seems to work just fine.
the only thing that's strange is the the image is rendered typeless as:
data:;base64,iVBORw0KGgoAAAA......== without the type (image/png).
if I use online encoders for the same image I will get:
data:image/png;base64,iVBORw0KGgoAAAA......== (notice the image/png type)
and so my question is why is that?
is my image to byte conversion wrong? like I said, the image is displayed fine it just is missing the type.
Note that the data send from the java websocket server is not encoded with base 64, its something I do on the client side (via JS's FileReader.readAsDataURL(blob) - very common).
thanks a lot and sorry for the long post
No, your image to byte array conversion is not wrong. Byte array conversion treats the images as a binary stream, it has nothing to do with the MediaType contained in it.
The type that you want to see is a Data URI media type.
Normal java code for converting files to byte array won't give you data URL scheme compliant URL.
From the RFC
data:[<mediatype>][;base64],
The <mediatype> is an Internet media type specification (with
optional parameters.) The appearance of ";base64" means that the data
is encoded as base64. Without ";base64", the data (as a sequence of
octets) is represented using ASCII encoding for octets inside the
range of safe URL characters and using the standard %xx hex encoding
of URLs for octets outside that range. If <mediatype> is omitted, it
defaults to text/plain;charset=US-ASCII. As a shorthand,
"text/plain" can be omitted but the charset parameter supplied.
RFC source
When you're creating the Blob object in Javascript you have an option to pass MediaType to it so that when you read it using FileReader.readAsDataURL it fills the appropriate media type.
Example is below
var blob = new Blob( [ arrayBufferView ], { type: "image/jpeg" } );
Source
You probably don't need BufferedImage in your code, simple file read should suffice.
Following is equivalent of your code with Apache FileUtils.
ByteBuffer bf = ByteBuffer.wrap(FileUtils.readFileToByteArray('test.jpg'));
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/