The following example shows how you can convert an ImageSnapshot object into a Base-64 encoded string using Flex 3’s cleverly named encodeImageAsBase64() method.
Full code after the jump.
<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2007/12/07/converting-an-imagesnapshot-object-into-a-base-64-encoded-string-in-flex-3/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
layout="vertical"
verticalAlign="middle"
backgroundColor="white">
<mx:Script>
<![CDATA[
import flash.events.FocusEvent;
import flash.system.System;
import mx.graphics.ImageSnapshot;
private function button_click(evt:MouseEvent):void {
var ohSnap:ImageSnapshot = ImageSnapshot.captureImage(img);
textArea.text = ImageSnapshot.encodeImageAsBase64(ohSnap);
}
private function textArea_focusIn(evt:FocusEvent):void {
textArea.setSelection(0, textArea.text.length);
}
]]>
</mx:Script>
<mx:ApplicationControlBar dock="true">
<mx:Button label="Capture and encode"
click="button_click(event);" />
</mx:ApplicationControlBar>
<mx:Form>
<mx:FormItem label="source:">
<mx:Image id="img"
source="@Embed('images/flex_logo.jpg')" />
</mx:FormItem>
<mx:FormItem label="Base64:">
<mx:TextArea id="textArea"
editable="false"
showScrollTips="true"
width="320"
height="160"
focusIn="textArea_focusIn(event);" />
</mx:FormItem>
<mx:FormItem>
<mx:Button label="Copy to clipboard"
enabled="{textArea.text.length > 0}"
click="System.setClipboard(textArea.text);" />
</mx:FormItem>
</mx:Form>
</mx:Application>
View source is enabled in the following example.
{ 5 comments… read them below or add one }
Nice, but how can I copy an image to the clipboard and paste that image into say, word or Excel or any other program that can display a JPG file?? I guess I don’t see what this buys me… having the image as text based Base64 encoded?
Matt,
I, too, have wondered how Base64 encoding benefits a developer. The text has a larger file size than the image itself, and it has to be decoded to be useful. The only benefit I can see offhand is that Base64 text can be embedded in an xml file, which would be useful for small images that people didn’t want to host somewhere. It would bloat the xml file somewhat, but for small images it wouldn’t be too bad.
Can someone more knowledgeable in this area shed some light on the issue?
I am using encoded images to send it via Soap to a php server.
php then creates the actual images and place them on a server. then its available for flash to access it
Thanks for the info – I used the example to send the Base64 png to a PHP script that opens a download dialog box:
var urlRequest:URLRequest = new URLRequest("server/image.php"); urlRequest.method = URLRequestMethod.POST; var vars:URLVariables = new URLVariables(); vars.image = b64String; urlRequest.data = vars; navigateToURL( urlRequest, "_blank" );image.php contents:
<?php header('Content-Type: image/png'); header("Content-Disposition: attachment; filename=viewlet.png"); echo base64_decode($_POST["image"]); ?>Hi, I wonder can the flex open a file from client computer and convert it into base64 string. It’s like file upload but we not upload the file, just read it and convert it into base64 and post it into Webservice or Remote object service. Thanks.