How to transfer image from javascript to my Opfl Html5? base64 encoding?

Hi

I want to know if it’s possible to transfer an image from JS to the HTML5 Openfl application.

I need to make a web application where the user takes a screenshot from the webcam and then manipulates the image adding stuff on top of it.

The “webcam screenshot part” is going to be programed in JS, and the “image editing part” will be programmed in Haxe using OpenFL.
So I need to transfer the screenshot image from JS to the OpenFL Html5 application.

What I could investigate is that images in JS can be stored in the base64 format, Maybe I need to get the base64 variable from JS and then parse it into a ByteArray to convert it to BitmapData. Can someone point me in the right direction on how to do this?

Maybe this class is what I need? if yes how I should use it? Also should I get the data using ExternalInterface?

If you have an HTML5 Canvas or Base64 this should work :slight_smile:

var bitmapData = BitmapData.fromBase64 (imageData, imageType);
var bitmapData = BitmapData.fromCanvas (canvasElement);

If you have an HTML5 Image there’s also a way through Lime

http://docs.openfl.org/openfl/display/BitmapData.html#fromImage

1 Like

Thanks! :grinning: but 2 more questions:

  1. for base64, imageType should be lime.graphics.ImageType.DATA? or ImageType.CUSTOM?

  2. and this is how you get imageData?:

    var imageData:String = ExternalInterface.call(“getMyBase64VariableInMyJS()”);

(getMyBase64VariableInMyJS returns the base64 variable)

I’m pretty sure it’s something like the base64 text string, as well as the content type, like “image/jpeg”

Another option would be using JavaScript to convert to an Image, then to load that. Whatever’s easier :slight_smile: