Error #2077: This filter operation cannot be performed with the specified input parameters - actionscript-3

Error #2077: This filter operation cannot be performed with the specified input parameters.
at flash.display::BitmapData/applyFilter()
I got this error message trying to apply a BitmapFilter (specifically an inner DropShadowFilter) to a BitmapData via .applyFilter
I've never seen this message before and Googling did not immediately answer the question, and I saw someone confounded as to why it applied to JPEG and not PNG images. So hopefully this question will help someone else. I'll include my simple solution below.

Reading the BitmapData.applyFilter documentation, it's fairly obvious what the problem is. I tried to apply a DropShadowFilter to a BitmapData without transparency (aka, no alpha channel, only 24 bits per pixel.) The docs state which filters require transparency (replicated here for convenience):
Each type of filter has certain requirements, as follows:
BlurFilter — This filter can use source and destination images that are either opaque or transparent. If the formats of the images do not match, the copy of the source image that is made during the filtering matches the format of the destination image.
BevelFilter, DropShadowFilter, GlowFilter, ChromeFilter — The destination image of these filters must be a transparent image. Calling DropShadowFilter or GlowFilter creates an image that contains the alpha channel data of the drop shadow or glow. It does not create the drop shadow onto the destination image. If you use any of these filters with an opaque destination image, an exception is thrown.
ConvolutionFilter — This filter can use source and destination images that are either opaque or transparent.
ColorMatrixFilter — This filter can use source and destination images that are either opaque or transparent.
DisplacementMapFilter — This filter can use source and destination images that are either opaque or transparent, but the source and destination image formats must be the same.
Creating a BitmapData with transparency is easy - it's the 3rd parameter to the constructor:
// args are: width, height, is_transparent, default_color
var bd:BitmapData = new BitmapData(1024, 768, true, 0xff000000);
Note that when you create a transparent BitmapData, you must specify a 32-bit integer for the default color (the 4th parameter). If you merely specify 0xffffff (24-bit white), you'll get a blank image as the alpha value (the highest 8 bits) are 0.

Related

How to remove background color in Pygame (make_surface)?

I have used opencv to read png files (with no background) and convert them into pygame surface. Here are the two examples of how I did it:
Method 1:
character=pygame.image.load("character.png")
Method 2:
CharacterImage=cv2.imread("character.png")
CharacterImage=convertToRGB(CharacterImage,CharSize,CharSize)
#charSize is desired character size (for example: 50)
#I have created a user defined function as pygame renders in RGB whereas cv2 renders in BGR image format.
CharacterActions.append(rotate(pygame.surfarray.make_surface(CharacterImage),charrot))
#charrot is rotation angle
I understand that I could manually resize images and then use the first method to get the transparent background image. But I want to understand if its possible to obtain the same via second method? I don't want to manually edit so many images resizing them and that's why I want to know if there's a way for the same.
Thanks in Advance
On the images you load using your Method 1 (pygame.image.load()), you should use pygame.transform.scale() and pygame.transform.rotate() to manipulate the loaded image.
To maintain the transparency, you need to keep the alpa of the image you are loading. To do that you need to use .convert_alpha() on the resulting image. You can do that after or before the transform.
For each of these commands I have linked them to the documentation, just click on them so you can read it.

Get color of a point on the canvas

Is it possible to get the color (rgb-value and transparency) of a point (x/y-coordinate) from the canvas? Example: I draw some figures and text on a canvas and later I want to get the color of a point at a specific coordinate.
The solution should be independent whether the canvas is visible on screen or not. And it should work independently from the operating system.
I didn't found any solution on the web. That's why I assume that this is not possible. Am I right?
The canvas isn't very pixel-based, and provides no API for doing this.
But if you've got the tkimg package installed, you can use that to do a screengrab of the canvas and then fetch the pixel value out of that.
package require Img
# Get the data into an image
set screengrab [image create photo -format window -data $theCanvas]
# Read the pixel data out of the grabbed image
set pixeldata [$screengrab get $x $y]
# Get rid of the grabbed data once you're done
image delete $screengrab
Note that the coordinates concerned will be viewport coordinates, not canvas internal coordinates: if you've scrolled the canvas, you'll have to offset as necessary.
You are correct, tk does not provide any way to get the color of a specific pixel on a canvas.

When is .stroke() required after .clearRect()?

I have several places in my charting code where .clearRect() doesnt have any effect, unless I call .stroke() on the next line. At first I thought I forgot to close some path somewhere, but I doublechecked that is not the case.
What could be a logical explanation for this behaviour, or is a call to .stroke() required by the specifications?
Without code to see what you are actually doing it is hard to tell what goes wrong.
But no, stroke is not required and is not related to clearRect.
Here are some generic points to consider:
stroke() will only rasterize the outline of an existing path. If there is no path there won't be anything to stroke.
clearRect() does not work on paths but only on the bitmap itself. It is not related to stroke() or any other path operations. Clearing the bitmap does not clear the path.
A path is cleared (reset) by calling beginPath() but does not clear anything in the bitmap
closePath() is only required if you want to connect first point with the last point (ends the loop) and must be called before path is rasterized using stroke() to have an effect (fill() on the other hand will implicitly and temporary close the path for you as it cannot fill an open path - this goes for clip() as well just to mention it).
Clearing a canvas means all pixels in the region that is being cleared are set to black color and fully transparent.
clearRect() is affected by transforms.
If you call clearRect() and does not reset the path (with beginPath) and then call stroke you will rasterize what is existing on the path.
If you intention is to animate somwthing then you can consider the following routine:
Clear canvas (clearRect())
Clear path (beginPath())
Define path with current coordinates (arc, line, rect etc.)
Rasterize path (stroke() or fill())
Loop using requestAnimationFrame or setTimeout/setInterval depending on your update frequency.

BitmapData.draw with different shape

is it possible to change the Rectangle I use as fifth parameter of draw BitmapData class?
bitmapData.draw(image,null,null,null,rect,false);
I'm trying to draw and save a different shape (with the shape of a particular MovieClip).
If you look at the definition for the BitmapData's copyPixels method (adobe documentation), you'll see:
"If you include the alphaBitmap and alphaPoint parameters, you can use
a secondary image as an alpha source for the source image. If the
source image has alpha data, both sets of alpha data are used to
composite pixels from the source image to the destination image. The
alphaPoint parameter is the point in the alpha image that corresponds
to the upper-left corner of the source rectangle. Any pixels outside
the intersection of the source image and alpha image are not copied to
the destination image."
You can probably get this to do what you want.

Get Image src attribute value for HTML5 canvas element

I have been searching - am thinking what I want to do is not possible but thought I would check.
I have a few canvasses on an HTML page as follows: (these are IDs below)
canvasMain - this is going to display
a large version of an image
canvasThumbnail1 - this is going to
display a thumbnail image
canvasThumbnail2 - same as
above...etc
I have it working where I paint the canvasMain with the contents of the thumbnail. The problem is since the canvas is immediate it is copying the pixels as they are over to the canvasMain from canvasThumbnail. This is resulting in an enlarged pixelated image.
What I want to do is click on one of the canvasThumbnails and be able to grab the Image.src property as a string and then pull that into canvasMain instead of actually copying the pixels over from one canvas to another. Essentially just grab the address (local or say on Flickr) from where I can pull in the image. Pulling an image in to a canvas seems to scale it nicely.
From what I have seen I do not think that Image.src value is accessible through the 2d context. I enumerated through its properties and have only found nested objects or native code returns.
I figured that if I clicked on the canvasThumbnail, and then used (this) to get a reference to that canvas element and then grab the 2dcontext of that canvas I may be able to use a property of that context to get a string that represents the value of the Image.src.
Any ideas?
Thanks
Somehow you painted the image onto canvasThumbnail1, presumably from a (high resolution) Image element.
The canvasThumbnail1, or any canvas for that matter, has no memory on things painted on it. So if you paint a large Image onto a tiny canvasThumbnail, the high-resolution data does not exist on that tiny canvas. To get it you must use the original image again, or else you must paint to a larger canvas from the start.
In other words, instead of painting the thumbnail onto the main, you need to repaint Image element (that you used to make the thumbnail) onto the main.