I'm trying to smooth an scaled image loaded from another website. The image is not animated.
It works well if I use a local image. but it seems not work with images loaded from remote server.
Here is the snippet:
...
//_loader.load(new URLRequest(http://img.example.com/remote.jpg));
_loader.load(new URLRequest("../assets/local.jpg"));
_loader.contentLoaderInfo.addEventListener(Event.COMPLETE, completeHandler);
...
protected function completeHandler(event:Event):void
{
var image:Bitmap = Bitmap(event.target.content);
image.smoothing = true;
image.pixelSnapping = "never";
}
As tested, when I load local.jpg, it works perfect. But when I load remote.jpg from the server, the smoothing param didn't work.
Anyone knows why?
I searched everywhere, but no one has the same problem. I'm not using Flash Professional, it's a pure ActionScript Project built in Flash Builder. And the image is not animating. So wired...
Because you are pulling an image from a remote server you need to set a cross domain policy xml file on the web server where the image is held.
Without this you can't alter bitmaps at a sub pixel level.
Example of:
http://www.senocular.com/pub/adobe/crossdomain/policyfiles.html
More details
http://www.adobe.com/devnet/articles/crossdomain_policy_file_spec.edu.html
I searched day by day, and finally find the answer:
_loader.load( new URLRequest("http:…." , new LoaderContext(true));
The most important is the second param of load() method, it's a LoaderContext. Reference:
http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/flash/display/Loader.html#load()
Although I set the crossdomain file in the server, without the "new LoaderContext(true)", it won't read the crossdomain file. That's why it doesn't work at first.
If you have the same problem, hope it's helpful to you!
Related
In my Xamarin app I upload a new "user profile" image on the server, then I try to update the image with the new version of the image (Noticed that the image uri is the still the same).
There is an image cache provided by Xamarin, I need to invalidate it to force the image to reload from the server. But it seems that the Image cache cannot be invalidated ! I find no solution !
I have try several solutions, but find no way ! Even when I restart the application I get the old version of the image.
I have try some stuffs like this :
(MediaImageSource as UriImageSource).CacheValidity = new TimeSpan(-1);
FFImageLoading.Forms.CachedImage.InvalidateCache(MediaImageSource, FFImageLoading.Cache.CacheType.All, true);
FFImageLoading.ImageService.Instance.InvalidateCacheAsync(FFImageLoading.Cache.CacheType.All);
But nothing work, any idea is welcome ? Thx
I do the following:
// this.Img is the FFImageLoading.CachedImage in my view
var source = this.Img.Source as FileImageSource;
// Reset cache using the global instance (the key is the file name, I assume it is the uri for UriImageSource)
await ImageService.Instance.InvalidateCacheEntryAsync( source.File, CacheType.All, true );
// Reassign the image source (since the binding has not changed per se, the UI may miss the change otherwise)
this.Img.Source = new FileImageSource(...);
This reloads the image and FFImageLoading even does a nice fade animation when it changes.
There is actually a static method in CachedImage that accepts any kid of ImageSource, so there is no need to guess the key:
FFImageLoading.Forms.CachedImage.InvalidateCache(myImageSource, CacheType.All, true);
I've been trying for two days to find an alternative to loading an image into my current project. I am using Adobe Flash Professional CS6 as my IDE and Animation program. I would like to be able to display an image in my application. What I am trying to do is have the image display onto the screen, the user enters the PLU associated with the image, and if the PLU is right then they receive a point. I have everything else already to go, but I just can't find an efficient way to deal with loading the image.
Right now I'm using this to accomplish getting my image on the display:
var myDisp:Layer0 = new Layer0();
var bmp:Bitmap = new Bitmap(myDisp);
spDispBox.addChild(bmp);
The above code works just find, but the limitation I can't get around is that I'm going to have to import each image into the library and then consecutively code each part in. I wanted to stick to OOP and streamline this process, I just don't know where I should turn to in order to accomplish my project goal. I'm more than happy to give more information. Thanks in advance, everyone.
July, 26, 2014 - Update: I agree, now, that XML is the way to go. I'm just having a hard time getting the grasp of loading an external XML file. I'm following along, but still not quite getting the idea. I understand about creating a new XML data object, Loader, and URLRequest. It's just loading the picture. I've been able to get output by using trace in the function to see that the XML is loaded, but when I go to add the XML data object to the stage I'm getting a null object reference.
I'm going to try a few more things, I just wanted to update the situation. Thanks again everyone.
it seems like these images are in your FLA library. To simplify your code you can make a singleton class which you can name ImageFactory (factory design pattern) and call that when needing an image which will return a Sprite (lighter than a MovieClip)
spDispBox.addChild( ImageFactory.getImageA() ); // returns a Sprite with your image
and in your ImageFactory
public function getImageA():DisplayObject {
var image:Layer0 = new Layer0(); // image from the FLA library
var holder:Sprite = new Sprite();
holder.addChild( new Bitmap( image ) );
return holder;
}
also recommend using a more descriptive name than Layer0
This issue has been following me around for almost a year now, and I want to kill it, for my sake and for the sake of all.
I'm working on some banner ads that need to load in images from a client's site for display. When I tried to do this using AS2, I found out that AS2 doesn't let you do that. It's a bug in the language. There are workarounds for images on the local server, but images loaded from are not allowed to share their BitmapData, so those workarounds don't work. I ended up capitulating after about two months of banging my head against the desk and cursing Macromedia.
Now we are talking about moving to AS3 (finally) and I'm really excited. Or, I was really excited until I started doing some tests for image quality and found that there is very little change in image quality happening here. It's a repeat of my trials with AS2: everything loads perfectly in the IDE, I get all excited, I move the swfs over to the test server to run them online, and POOF - jaggies. Jaggies everywhere.
I've read a number of solutions online, none of which work. They include:
Setting target.content.smoothing to "true". Works great in the IDE. All improvements disappear in the browser.
Setting target.scaleX = target.scaleY to 1.01. It just breaks the swf.
Adding "new LoaderContext(true)" to my parameters for the load command. Does nothing.
Setting target.content.pixelSnapping to "always". Looks perfect in the IDE, not in the browser.
Setting a crossdomain.xml file. The images are showing up - they're being loaded, even if jaggedly, so there must be a functioning crossdomain file on the client's server, right?
So now I'm just stuck, and brokenhearted. Could anyone offer insight on my code, and why it might not be rendering as beautifully as it should be? Here is the client-safe version of the quick demo I am making (only the image URL has been deleted, everything else is as it is now):
import flash.events.Event;
function completeHandler(e:Event) {
e.target.content.pixelSnapping = "always";
e.target.content.smoothing = true;
}
var imgurl:String = "CLIENT'S IMAGE URL HERE";
var imageLoader01:Loader = new Loader();
var image01:URLRequest = new URLRequest(imgurl);
imageLoader01.load(image01);
imageLoader01.contentLoaderInfo.addEventListener(Event.COMPLETE,completeHandler);
addChild(imageLoader01);
imageLoader01.x = 2;
imageLoader01.y = 0;
imageLoader01.scaleX = imageLoader01.scaleY = .6;
var imageLoader02:Loader = new Loader();
var image02:URLRequest = new URLRequest(imgurl);
imageLoader02.load(image02);
imageLoader02.contentLoaderInfo.addEventListener(Event.COMPLETE,completeHandler);
addChild(imageLoader02);
imageLoader02.x = 100;
imageLoader02.y = 80;
imageLoader02.scaleX = imageLoader02.scaleY = .308;
var imageLoader03:Loader = new Loader();
var image03:URLRequest = new URLRequest(imgurl);
imageLoader03.load(image03);
imageLoader03.contentLoaderInfo.addEventListener(Event.COMPLETE,completeHandler);
addChild(imageLoader03);
imageLoader03.x = 200;
imageLoader03.y = 180;
imageLoader03.scaleX = imageLoader03.scaleY = .152;
var bannerLegend:legend = new legend();
addChild(bannerLegend);
Thank you very much in advance. Any help will be sorely appreciated.
Update: Here is the HTML embed code:
<div id="swf_mr_sc_wt_si"></div>
<script type="text/javascript">
<!--
var swfurl = "http://DOMAIN_WITHELD_SORRY/static/AS3.swf?m=DEFAULT&t=" + (new Date().getTime());
swfobject.embedSWF(swfurl, "swf_mr_sc_wt_si", 300, 250, "8.0.0", "");
// -->
</script>
<p>
Hope this helps.
Further Update: We are not listed in the crossdomain.xml file. But we can still load the jagged images. And those images, when loaded into the same swf run in the IDE, are smooth. I think I'm missing understanding of some kind of apocryphal knowledge here, because everything I read points to me being able to do this. This is VERY confusing.
It's because the image you're loading is located on another domain, and that domain's crossdomain.xml does not contain the domain the .swf is residing on, basically giving the .swf "permission" to access the image's pixel data (Yes, just enabling smoothing on an image loaded from another domain requires the same security as when reading the pixel data using BitmapData.draw(), which is a bit curious). When running in local security sandbox the restrictions are more lax, that's why it works running from the IDE.
Even if your domain were among the approved domains in the crossdomain.xml you might need to tell the Flash Player to check the policy file by sending in new LoaderContext(true) as a second argument to Loader.load() when loading the image.
Edit: I originally thought using loadBytes() would be a workaround, but it turns out it's not. I have removed that example code
I have a web application running on local host. The requirement is to load multiple rectangular jpg images (96 images, average 7k in size each) and show on home page when it runs. Images are showed in a grid of 8x12 rows/columns. I am loading image by setting the 'src' attribute of the 'img' in javascript. The url assigned to the 'src' attribute is same for all images but the image id is different. Images are loading but the main issue is that they are not loading very quickly and they are some what loading in a sequence means 1,2,3,4... and so on but some images are not loaded in sequence. I want to improve the performance of this page. I have tried the figure out the timings at different points like:
When call is originated form client (image src attribute is set)
When server is receiving call. (the page on server which serve individual image)
When server is about to return the image.
When on client side image is received/showed (image loaded event called in javascript)
It turned out after looking at the collected data that main time is lost between 1 and 2 above that is between the client side call is originated and server is receiving call for a particular image.
I have also tried setting parameters like maxWorkerThreads, minWorkerThreads, requestQueueLimit and maxconnection in machine.config but no significant improvement yet.
Can someone please help me in this situation as i am stuck here since many days and i am really short of time now. Desperately needs to improve the performance of these images loads.
Thanks in advance.
Since you stress the lack of time, I would advise you to try a jQuery plugin that loads images on demand. The gallery in which you load the pictures, does the user scroll in it? Or is it 1 big field?
If it's a gallery the user can scroll in, I'd strongly suggest you take a look at lazyload. What this plugin does, is it fetches the image only when it is needed. As long as it's not on the screen, it will not be loaded. For a brief example, have a look at this demo.
I hope this can help you out.
I am using three.js to do some online interactive modelling of geology, and have been creating image URI using the Canvas Element (output would be: data:image/png;base64,).
The image creation works fine in Chrome,Firefox, and Safari, but using the images in three.js as a texture doesn't show up in Firefox.
The simplest demonstration I can show is by changing one line of a three.js example, to substitue an image URL for a dataURI, and use that as a texture.
http://visiblegeology.com/renderingProblem/
This works fine for me in Chrome and Safari, but just doesn't show up in Firefox.
I was wondering if anyone had any advice, work-arounds, or thoughts.
Thanks for any help,
Rowan
I've checked using a regular img tag. It works that way in Firefox. So the problem would seem to be the combination of three.js and the data uri.
This example by mrdoob doesn't work in Firefox either: http://mrdoob.github.com/three.js/examples/webgl_particles_shapes.html
A few suggestions:
check if you are using the latest three code.
try removing the final equals sign of the data uri. It is used for padding and may not be necessary.
try disabling your add ons one by one, as they may interfere as well