I am trying to use stackBlur (http://www.quasimondo.com/StackBlurForCanvas/StackBlurDemo.html) to blur entire image with stackBlurImage( 'srcimg', 'canvas', 10, false );. But neither it's working on local system nor on internet. Could someone please suggest me correct way of doing it?
Here is my jsFiddle - http://jsfiddle.net/yesprasoon/3KxrW/
Or please let me know any other way of blurring the image. CSS transition is not working in Phonegap for Android webkit.
UPDATE
Image was not getting blurred due to some '..because the canvas has been tainted by cross-origin data' error. I was testing it as local file in Chrome. Script runs fine with chrome:localhost/IE9/FF.
The reason is that you are not allowed to access and modify an image (with a canvas), unless it is hosted on the same server as your webpage.
See here for more details.
If the image is hosted alongside the webpage, then there is no problem using the code you provided (e.g. stackBlurImage("srcimg", "canvas", 5, false);).
See, also, this short demo.
Related
I'm trying to replace an image in a Google Slide by a smaller version of it (in terms of bytes).
The smaller image should be displayed exactly the same way than the older.
But when my original image was croped, I cannot reproduce it with the new one.
What I'm doing is simple (I'm using this replace method)
let image = page.getImages()[0];
let newImageUrl = optimize(image.getContentUrl()); // API call to get an optimized image. newImage will have the same width and height
image.replace(newImageUrl, true);
A visual example.
Here is my slide before (pay attention to the "Quick" logo at the bottom right corner)
And here is the result after replacing it (you can see that the bounding box is the same, it takes the same space in the slide, but the image itself is lower)
How can I reproduce the croping that I've initially done in my slide with that button ?
Thanks
Issue:
As mentioned in comments, crop properties are currently read-only, so this cannot be done. Here are possible workarounds: https://stackoverflow.com/a/63256489, https://stackoverflow.com/a/64040404, https://stackoverflow.com/a/67309702.
Feature request:
There's a feature request in Issue Tracker. Anyone interested in this, consider starring it:
Why are Image Crop Properties read only
No problems when running my app from Eclipse, but when exporting and running on desktop, all images from my TextureAtlas gets glitched, getting displayed as a black/gray boxes, as well as some weird stuff like white gradient boxes and lighting overlays.
Heres some screenshots of what I mean:
Wherever I'm suppose to have an image, thats some of the stuff I see instead.
I checked my .jar archive to see if the TextureAtlas resources made it through to the right directory that's not the issue.
app configs
cfg.useGL20 = true;
Anyone familiar with whats going on?
This problem was caused by a mismatch with the TexturePacker2 version used to create the altas, and the version used to load the atlas.
I just use following code to add an image to my project,
var paper = Raphael("mpdraw_div", 1920, 1080);
var img = paper.image("temp.jpg", 150, 10, 710, 653);
When FF, IE8 is showing my image, Chrome is insisting to not show my image in my project, when I create a new page and use the code above, there is no problem.
My project have lots of divs recursively, but I've tried to write mpdraw_div to just after body tag, this is a problem also.
What may be the possible cause of this situation?
Thanks in advance.
I reailized that it's because of loading an image before raphael is reason to fail.
Solution is to load an image after some ms(I use 100ms) later.
Hope this help to you all.
What I'm doing
Hello Im having problems loading external images into my flash (builder) application.
To show the image I use a BitmapImage with smoothing enabled like this:
<s:BitmapImage id="image" smooth="true" smoothingQuality="high" width="100%" height="100%" fillMode="clip" />
I also show thumbnails using the new flex4.6 scaleMode ZOOM like this:
<s:Image id="thumbnail" scaleMode="zoom" smooth="true" smoothingQuality="default" />
I preload the external image using a SWFLoader because I need to store the original image width and height
The problem
When I test my application locally everything works fine! But when I run it from my web domain I see its showing problems. For images running on the same domain and images from Flickr = no problem. But other images like from imageshack show the following problems:
The larger BitmapImage is not smooth.
The thumbnail is not scaled like its supposed to. It's showing minuscule in the upper left corner of the thumnail Image. When I hover my mouse over it, the thumnail is shown but like it would be shown with the default scalemode and fillmode CLIP
Cause?
Im not really sure whats causing the problem, but the only difference I see in the image sources is in the domain policy. The crossdomain.xml for Flickr allows all http://farm1.static.flickr.com/crossdomain.xml unlike imageshack.us http://www.imageshack.us/crossdomain.xml
If this would be the cause then I dont understand why the image is still being loaded but crappy. Does anybody know what's going on exactly? Any solutions? Thnx.
There are certain limitation to loading images cross domain without the correct policy enabled. Flash will load the data, but not allow any manipulation, including smoothing.
There are a number of ways around this. You could use a server-side proxy, loading the image via a local php or asp page. It's not the fastest solution, but it will work.
You could also try loading the image with LoadBytes, then passing the byte-array into a Loader object. It's not as pretty as using the Flex component, but it should restore some control to you.
I have been working on a web application for some time now and did notice that the CPU usage was a bit high a long time ago, but the development has been halted for a while.
Recently I started developing again and discovered that the CPU usage goes high after an animated GIF image has been display as the background image.
I use Ajax to update content and apply CSS classes to elements to display a loading indicator. I remove the CSS class when the content has finished loading. If I comment out the classes in the stylesheet that contains the GIFs, everything looks normal.
I have tested it in Internet Explorer 7 and Internet Explorer 8.
What can be done to alliviate this problem?
var blabla = function() {
var element = $('id of element');
element.addClassName('a css classname');
new Ajax.Request({some parameters},
onSuccess: function() {
element.removeClassName('a CSS classname');
....
},
onFailure: function() {
element.removeClassName('a CSS classname');
....
},
onComplete: function() {
element.removeClassName('a CSS classname');
....
}
}
}
It's possible that this issue is related to how Internet Explorer loads data needed from CSS classes. Might I suggest an alternate approach: instead of using the loading animation contained within a CSS class, just put the .gif in a visible <img> tag straight into the HTML. Then, when onSuccess or another method is called, you can just run:
$("#ajax-gif").hide();
As already commented on, it looks like it doesn't have anything to do with the GIF image itself, especially not one at 20x20 pixels.
If you are changing the background of a page with a GIF image, it must redraw what's on top of it to a certain extent.
To bring down the CPU usage, either reduce what's on your page before you change the background or stop using GIF images, it's 2011!
If this problem is only occurring in Internet Explorer, it is indeed the redraw issue that commenters to Barnzy's answer have talked about. It should create similar problems across other browsers as well.
One solution would be to use the JavaScript onload event handler to preload all of your GIF images in the DOM, which would reduce the need to redraw and should stop escalating the CPU cycles.
I agree that in 2011 using GIF images is probably not the best approach for web design.