How can I copy or duplicate the bitmapdata from a mx:image component?
I need to display the same image in multiple screens of my application and don't want to have to download the image multiple times.
I could just use a urlrequest to download the image as a bitmap and copy that but I like the way you can can just set the source of the image component.
Image extends SWFLoader which has a content property that will contain the Bitmap object that was loaded. Wait for the image to load, cast the content to Bitmap and read its bitmapData
public function imageLoadCompleteHandler(e:Event):void
{
var bitmap:Bitmap = img.content as Bitmap;
if(bitmap == null) {
trace("loaded content is not an image");
return;
}
bmpData = bitmap.bitmapData;
//hurray..!
}
Actually after reading the message above (and trying stuff out) I think this is wrong. The Complete listener fires on my second image so I guess it is loading it twice. Oh well.
I couldn't place the whole Flex doc, but this seemed to work. I added this to the Application tag: applicationComplete="Run();"
The following is wrapped in a mx:Script tag:
import mx.controls.Image;
private function Run():void
{
var i:Image = new Image();
i.source = first.source;
addChild(i);
}
And this is just a Image outside of the script tag:
<mx:Image x="12" y="125" source="e53c04a51d5992fb77ab1e20c45ddc9f.jpeg" id="first" />
I also tried this after setting the i source:
first.source = null;
Just to see what happens, the i image keeps it's source
Related
I have a page that displays data about an object. At the top of the page is room for an icon, showing a picture of that object. Tapping this icon brings up a new page that allows the user to take a new picture, and save it as a temporary new picture for the object (not put in database, but should persist for the session)
Initial page:
private var source:Object = new Object();
protected function onInitialize():void {
source = navigator.poppedViewReturnedObject;
}
When setting source for the image later...
if (source != null) {
pic.source = source.object;
}
else {
pic.source = "no_picture_available_image.png";
}
2nd Page (User can take picture, and view new picture):
[Bindable]
private var imageSource:Object = null;
<s:Image id="pic" width="90%" height="75%" horizontalCenter="0" source="{imageSource}" />
After taking picture...
protected function mediaPromiseLoaded(evt:Event):void {
var loaderInfo:LoaderInfo = evt.target as LoaderInfo;
imageSource = loaderInfo.loader;
}
This does show the picture just taken correctly on this page.
To get back to old page, i use navigator.popView, and use:
override public function createReturnObject():Object {
return imageSource;
}
Unfortunately, it doesn't work. The imageSource isn't null when it is read from navigator.poppedViewReturnedObject, but no image is shown.
Does the LoaderInfo not persist after popping the view? Are the camera pics not automatically saved? I can't find answers to any of these questions, and I can't debug using the phone in my current environment.
After thinking about this a bit, don't return LoaderInfo.loader as the poppedViewReturnedObject. If I remember correctly, a DisplayObject can only be set as the source of one Image. Instead, return LoaderInfo.loader.content.bitmapData. That BitmapData should be the raw data used to display the image. This data can be used repeatedly to create images and can be set as the source of an Image.
Problem turned out to be in my first page's image declaration - I didn't set a width. Seemingly, the object being displayed couldn't handle not having a specified width.
Note that passing back the loader did work fine.
I am working with a digital book application. I make use of swf loader to load swf pages created from pdf. I use TextSnapsot to draw inline text highlight on the pages. The highlight is thoroughly retained on the respective pages throughout the session and later it can be updated/deleted without any problem. Everything was working great till I made the following changes in the swf loading approach to enable page caching:
I am now loading swf loader object into application memory and while doing jumping from one page to other page I am just copying the content of the next page to the current swf loader which is on the display to the user. There are two sets of swf loaders - one for displaying the page and other to cache the next/previous page(s). On the caching side, I load the swf into application memory and after getting it loaded I pick all the contents of the loaded swf page (the children of it's movie clip) into an array collection. While changing the page I copy the cached content into the swf loader's movie clip which is displaying the page.
Now when I highlight on the page on display and navigate back/forth from the page and comeback again to the page where I did the highlighting: It shows the highlight I did. But as soon as I try to draw another highlight on that page, the previous highlight is instantly disappears from the page.
I suspect that the Textsnapshot object which draws highlight while navigating (to the target display page) is different from the one which redraws/update the highlight on the same page next time. Although the Textsnapshot object id for both the objects is same.
Here are some code snippet:
For copying the content from the swf loader object cached in application memory:
private function copyPageContent():void
{
var contentCollection:ArrayCollection = new ArrayCollection();
_pageContentVO = new PageContentVO();
_pageContentVO.contentHeight = MovieClip(_swfPageLoader.content).height;
_pageContentVO.contentWidth = MovieClip(_swfPageLoader.content).width;
var count:int = MovieClip(_swfPageLoader.content).numChildren;
for(var i:int=0;i<count;i++)
{
var dispObject:DisplayObject = MovieClip(_swfPageLoader.content).removeChildAt(0);
contentCollection.addItem(dispObject);
}
_pageContentVO.pageContentCollection = contentCollection;
_swfPageLoader = null;
}
For copying the content to the swf loader which is displaying the page:
private function copyContent(pageContentVo:PageContentVO):void
{
for(var i:int = 0;i<pageContentVo.pageContentCollection.length;i++)
{
var dispObject:DisplayObject = pageContentVo.pageContentCollection.getItemAt(i) as DisplayObject;
MovieClip(this.content).addChild(dispObject);
}
this.content.height = this.height;
this.content.width = this.width;
}
after this I dispatch swf loader's complete manually and in the handler of that event I take the text snap shot object.(highlightManager.as)
Code I use to draw highlight manually(using mouse drag on the page).
public function setHighlight():void
{
removeAll();
if(_textSnapShot!=null && _textSnapShot.getText(0,_textSnapShot.charCount)!="")
{
if(_isCoveredTextSelectedAtAnyInstance)
{
_textSnapShot.setSelected(_beginIndex,_endIndex+1,false); //this is the global variable to the class
}
else
{
_textSnapShot.setSelectColor(0xfff100);
_textSnapShot.setSelected(_beginIndex,_endIndex+1,true);
}
if(saveHighlight)
{
countHighlightedSegments();
}
}
}
Code I use to redraw previously drawn highlight when I return to the page:
public function showHighlights(textSnapShot:TextSnapshot,currentPageNum:int):void
{
if(currentPageNum >= 0)
{
textSnapShot.setSelected(0,textSnapShot.charCount,false);
var pageVO:PageVO = _model.eBookVO.eBookPagesVO.getItemAt(currentPageNum) as PageVO;
var objColl:ArrayCollection = new ArrayCollection();
objColl.source = pageVO.highLightSelection;
for(var i:int=0;i<objColl.length;i++)
{
var highlightVO:HighlightVO = new HighlightVO();
highlightVO.beginIndex = objColl.getItemAt(i).beginIndex;
highlightVO.endIndex = objColl.getItemAt(i).endIndex;
setHighlightedSegment(textSnapShot,highlightVO.beginIndex,highlightVO.endIndex);
}
}
}
private function setHighlightedSegment(textSnapShot:TextSnapshot,beginIndex:int,endIndex:int):void
{
textSnapShot.setSelectColor(0xfff100);
textSnapShot.setSelected(beginIndex,endIndex,true);
}
Looking forward to your support to resolve this issue.
Regards,
JS
What you're doing is not 'caching', it's preloading previous/next pages. Also, what you're doing is really bad practice. I'm not even sure why you're casting these things into MovieClips unless the SWFs are that; if they're Flex SWFs, they'll be UIComponents. I would recommend you rethink your approach. I wouldn't even bother copying the children or anything over. Once the browser loads a SWF, it is now part of the browser cache, meaning the next time it's requested, it won't actually download it.
If you want to 'cache' your SWFs for a quicker next/previous page flipping, I would recommend you use something like SWFLoader to just load the other SWFs without actually adding it to the display, then removing it from memory. That will cache the SWFs for you in the browser. Then when the user click previous/next, just change the url of the main swfloader of the currently displayed page and it will load it up really quickly. No downloading since it's already cached, it will just need to instantiate.
I am writing a Flex application to receive xml from an httpservice. That works because I can populate a datagrid with the information. The xml sends image pathnames. A combobox sends a new HttpService call onChange. This repopulates the datagrid and puts new images in the folder that flex is accessing.
I want to dynamically change the image without changing the pathname of the image.
<mx:Canvas id="borderCanvas"><mx:Canvas id="dropCanvas">
<mx:Tile id="adTile"><mx:Image></mx:Image>
</mx:Tile></mx:Canvas></mx:Canvas>
This is my component.
I assign my Image sources using this code:
var i:Number = 0;
while ( i <= dg_conads.rowCount){
var img:Image = new Image();
img.source = null;
img.source = imageSource+i+".jpg";
adTile.addChild(img);
i++; }
My biggest problem is that the images are not refreshing. I get the same image even though I've prevented caching from the HTML wrapper and the ASP.Net website. The image automatically loads in the folder and refreshes in the folder but I can't get the image to refresh in the application.
I've tried removeAllChildren(); delete(adTile.getChildAt(0)); and neither worked.
I would try using:
img.load(imageSource + i + ".jpg");
If that doesn't work, try appending a random number on the end ie:
img.source = imageSource + i + ".jpg?" + Math.random();
Have you tried to add id="img" into the mx:Image tag directly and remove adTile.addChild(img);
in the script?
Is it possible to get the bitmap data from a component using ActionScript?
I dynamically load an image.
onComplete I create a Flex Image component and add the loaded image to the source
loader.contentLoaderInfo.addEventListener(Event.COMPLETE, function(e:Event):void
{
var image:Image = new Image();
image.x = 0;
image.y = 0;
image.source = e.currentTarget.content;
canvas.addChild(image); // canvas is already added as an MXML element.
}
Later I want to create a new Image component and get the bitmapData from the first Image.
I have tried this
canvas.getChildAt(0)
Which seems to give me the Image, but I can not figure out how to get the bitmap data.
canvas.getChildAt(0).bitmapData;
gives me a compile error "... undefined property"
Does anyone know how ot get the bitmap data so I can use it in my new Image component?
Thanks in advance,
Ran
Check out ImageSnapshot.captureBitmapData()
http://livedocs.adobe.com/flex/3/langref/mx/graphics/ImageSnapshot.html
Cliff's answer will give you a screenshot of the Image; to get the underlying BitmapData for the image without doing a screenshot, you can try
Bitmap(image.content).bitmapData
This should avoid any filters as well.
This should do it.
var bd:BitmapData = new BitmapData(myComponent.width, myComponent.height, true, 0);
bd.draw(myComponent);
We are creating a LinkButton programmatically and would like to set it's icon to an image retrieved from the remote server rather than something embedded within the SWF. The .icon property expects a Class but I can't figure out how to create one equivalent to an #Embed but from a dynamically generated URLRequest or URL String.
var myImage:Image = new Image();
myImage.source = "http://www.domain.com/img/1234.png";
myImage.width = 16;
myImage.height = 16;
myImage.scaleContent = true;
var myButton:LinkButton = new LinkButton();
myButton.label = "Some text"
// This is what I'm trying to figure out.
myButton.setStyle("icon", ???)
I'm probably missing something obvious - I've tried passing in the URL and myImage separately but both throw errors. Stepping into the setStyle() method shows that the code is expecting a Class - so what do I pass in place of the ???
I can't embed the image itself because it's dynamic - the URL is different each time the software runs.
Thanks for any assistance!
Why not just set the buttonMode of a mx:Image to true then add a click event?
<mx:Image source="{imageSource}" buttonMode="true" click="action()" />
I'm not sure its possible without using an embedded images with a linkButton
This might be worth a read
Edit... in AS3:
var img:Image = new Image();
img.source = "...";
img.buttonMode = true;
img.addEventListenever(MouseEvent.CLICK, funcName);
I think that instead of trying to set the style, you need to change the child object that holds the icon. You can access it by something like:
Var:Bitmap icon = myButton.getChildByName("upIcon") as Bitmap
It should be easy to replace the bitmapData in there with the one from a Loader.
If memory serves, you'll want to use button.setStyle('icon', img), where img is an image loaded via Loader class.
for laalto,
this may be too late of an answer but somebody might find it useful or as a starting point to a solution to your problem. Have you tried referencing your image icon as a class? I don't know if this will work for an image which is in a dynamic URL but this worked for me:
[Embed("assets/LinkButton.png")]
private const linkButtonIcon:Class;
Then in your code:
myButton.setStyle("icon", linkButtonIcon);
See this example here:
http://blog.flexexamples.com/2008/09/03/setting-the-icon-on-a-linkbutton-control-in-flex/
<mx:Button id="example" label="Example" icon="{IconUtility.getClass(example, 'http://www.exampledomain.com/image.jpg')}" />
http://blog.benstucki.net/?p=42