I would like to know what is the most efficient way to transfer BitmapData object from Actionscript to Javascript, so an image can be displayed on webpage.
So far, I've managed to craft a string containing image data using data URI scheme in Flash and then I transfered it to the Javascript using ExternalInterface.call("<function_name>", data).
While it is working fine, it seems wasteful to convert image to its textual representation just to transfer it. Is there a cleaner/more efficient way to achieve the same?
AS3:
base64 encode your BitmapData object. example
then:
ExternalInterface.call("setImage",encodedImg);
Javascript:
function setImage(baseSixtyFourEncodedImage)
{
document.getElementById("myImage").src = "data:" + baseSixtyFourEncodedImage;
}
HTML:
<img id="myImage" src="no_image_from_flash_yet.png">
Don't forget to import ExternalInterface on the flash end!
let me know how it goes.
Related
I am using a library to recieve attachments (image) from salesforce using OAuth and a proxy. Without the library (and the proxy) I am able to the same using XHR, but I have to use the library because I need the proxy.
In chrome debugger I can see image is downloaded fine, but I can't get it to work in my code. Data looks like:
So far methods I have tried:
btoa(unescape(encodeURIComponent(file.body)));- produces a base64 that does not work. decoding it using online tools gives me back the same string.
escape(file.body) - using this as base64 also does not work.
Converting to a blob.
var blob = new Blob([file.body], {type : "image/png"});
urlCreator.createObjectURL(blob);
The url it points to displays nothing, and if I remove {type : "image/png"} the url points to a page displaying same binary string.
Long story short this looks like someone read the image with readAsText() which mangles ("interprets") binary into utf8, instead of utf16. You need to get the server to return the data in arraybuffer or blob format ideally, or even base64, these preserve binary.
Long version with snippet. (those question marks symbols in the snippet show the lost information, compare it to the binary where they are not question marks in utf16):
https://stackoverflow.com/a/56523118/2962797
I would create an <img /> element, equal its src attribute to the image data you received. Now you have the image.
If you want to extract it or convert it to PNG, I would apply this another answer process.
I'm trying to paste an image from the clipboard into an <img> tag. The source of this image is Prnt Scrn command and not a file. This clipboard image would be in base64 format. This base64 string can be inserted into src attribute of <img> tag(once ctrl-v is pressed) using javascript for display purposes. This is accomplishable by using this plugin.
So the <img> tag would be something like this:
<img id="screen_image" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAABVYAAAMACAI......(long string here)"
Although, I could persist this entire string into a mongoDB collection and retrieve it back for displaying that image, my ultimate goal is to persist this image into gridFS. Is there a way if I could interpret base64 as a file and persist it into gridFS?
I hope I've made it clear. Comments welcome.
UPDATE: I want to maintain a common collection to store images or any file for that matter(I'm already using gridFS to persist file attachments so I do not want to create a new collection to store clipboard images). I have also tried decoding the string using window.atob() but then I don't know how that could be persisted to gridFS
I'm using Mongo for my senior project right now and previously I was storing child (client is a local non profit like world vision) pictures with GridFS but recently I've moved to storing them in the actual child doc in base64. All of the images are around 3mb and base64 converts out to mostly 4-5mb. If you can store them as base64 it makes for a much simpler schema, I think.
I know you said you wanted to use GridFS, but I would only go that route if you have files over 16mb. For what I hope are obvious reasons it's much simpler to just store them as strings in docs.
I'm trying to transfer a jpeg from Flash to JavaScript. Is this even possible?
What I mean by that is: Flash is supplied an image from the user and performs some image manipulation. I then need to display that modified image in HTML. Do I need to post the image from the flash to the server and load it in html through a URL, or can I pass it directly from the flash into a javascript Image object through flash's external interface somehow?
What's the best way to do this?
Thanks.
One possible way is to encode your image to base64 and send the string via externalInterface call to JavaScript. On the JavaScript side you will need to decode the received string from base64 back to the original jpeg format.
Here a collection of tutorials to do all the bits needed:
Convert image to base64 in Actionscript: http://swati61.blogspot.de/2011/07/convert-image-to-base64-string-and-vice.html
Convert base64 to image in javascript : Base64 encoding and decoding in client-side Javascript
Communication between Actionscript and JavaScript: http://www.hariscusto.com/programming/communication-between-javascript-and-actionscript-as3-and-vice-versa/
I hope this answers your question.
Here is what I'm doing :
In javascript I ask for an image with AJAX.
The server php execute the following code :
readfile($pathfile);
Then the javascript receive the data, and with Phonegap I try to write it to a file :
var writer = new FileWriter();
writer.fileName = "./../Documents/" + nameFile;
writer.write(dataReceived);
In fact, it works with ASCII chars, but the function "write" fail with the content of the image received (png format). So I tried to encode the transferred data in Base64, in Hexadécimal and it works. But I don't want to store encoded data because I want to use it later in "img" tags (html tag). And make something like :
<img src='./../Documents/createdFile.png' />
Do you have any idea on how to write any characters in Phonegap to a file? Or what I'm doing wrong with the FileWriter of PhoneGap ? I know the way to do something like src='Image.php', but I have to store files on the device.
I've got the version 0.9x of Phonegap (included with Dreamweaver). Thanks in advance.
I finally found the explication. To begin I want to say that I just learned javascript ;) .So I asked the question to "macdonst" on github and he answered me :
"Sadly, you will be unable to write binary data with the FileWriter. JavaScript can't handle binary data very well and we can't pass binary data from the JavaScript side to the Native side so it is a limitation we have to live with.
However, once you've written you've gotten your base64 image data you can display it like this:
<img src="data:image/gif;base64,{this is where your base64 data goes}" />
"
Thanks to "macdonst", I posted his answer because I hope it will help beginners like me.
I am developing an authentication system which is based on images. For these I needed to use the "Canvas" element of HTML5. Now I want to pass this canvas object (which user selects) to the servlet. How may I achieve this? Please help
You can convert the Canvas into an inline image, and send the result to the servlet by using a XHR request. This blog entry describe how to convert a Canvas to a Base64 encoded image. For the XHR request, Google is your friend...