I searched the web but still confused that what are/is the difference(s) between sprite and png?
A PNG (Portable Network Graphics) is a file format, famous for enabling transparent backgrounds because of it's Alpha channel.
The Sprite is a image used in design, the file format doesn't matter, but in most cases it's used as PNG or GIF, because of the transparent background.
You can use sprites to make a movement of a character in gaming, or a spritesheet full of images used in web design where you link the coordinates of the desired sprite.
Related
I have an Easel.js-based canvas and a bunch of SVGs. When I put these SVGs on canvas as vector shapes and try to scale the whole canvas, some SVG contours become distorted / blurred.
Are there any ways to avoid such a behavior?
Problem:
SVG sample:
http://s000.tinyupload.com/index.php?file_id=88515840051764837348
EaselJS support in canvas is restricted to image-based rendering. Basically, it loads the SVG as a raster image. When you scale it, you aren't seeing it redraw the vector, but instead it scales like an image would. If you scale it above 100% it should be more obvious (it will get pixelly/blurry).
Not sure if you can work around this with an SVG source. You could bring paths into Adobe Animate, and export as raw EaselJS Graphics, which will scale more predictably.
Cheers,
I try to design some icons for gnome (symbolic icons) but the problem is that gnome files make them completely black(it fills the transparent areas in the icons)
how i can solve this problem
Use SVG or PNG for the image file of the icon.
https://specifications.freedesktop.org/icon-theme-spec/icon-theme-spec-latest.html
Some other image formats don't support transparent white space. I recommend testing your icons in an image viewer that supports white space. If you get a similar effect, mind this is not in the editing program so what your seeing in the image decoding library making sense of the image, then you should try to change image format to a different format that supports transparent white space. If you are using Gnome, Eye of Gnome, the default image viewer, should show a gray checkered pattern where there is white space.
I know fabricjs can play Video and sprite sheet, But I have a lot of gif files, can I play these gif directly with fabricjs? I am not able to find method in Fabricjs website.
According to specs about the Canvas 2DRenderingContext drawImage method,
Specifically, when a CanvasImageSource object represents an animated image in an
HTMLImageElement, the user agent must use the default image of the animation (the one
that the format defines is to be used when animation is not supported or is
disabled), or, if there is no such image, the first frame of the animation, when
rendering the image for CanvasRenderingContext2D APIs.
This means that only the first frame of our animated canvas will be drawn on the canvas.
This is because we don't have any control on animations inside an img tag.
And fabricjs is based on canvas API, thus regulated by the same rules.
The solution is you need to parse all the still-images from your animated gif and to export it as a sprite-sheet. You can then easily animate it in fabricjs thanks to the sprite class.
I'm looking for an all-in-one solution for processing web images
Resizing
Cropping
Save as WEBP / JPEG / PNG
Drawing simple rectangles
Adding text
Reducing colors (quantization) for PNG
The only thing I'm not clear about is PNG quantization. Currently I'm using pngquant which works great, but I'd prefer to do everything in one place.
I see the SkiaSharp has SKImage.Encode() which takes a quality parameter. However there's no explanation as to what it actually is. Will this give me color quantization for PNG files? If not, is there something else in the library to do this?
World Map Images in Adobe Illustrator CS5
I have an image Map in illustrator CS5 which i want to save in GIF so as to reduce its size for web use. But when i save it, the map boundaries are having some white pixels all along the map boundaries of map.
I really dont know why has happened to it, but cant save it in Png-8, png-24 formate due to size constraint.
Any meaningful answer will be highly appreciate and thanks in advance.
Is your background a non-changable color? Maybe you can save the image with the same color as a background.
The problem is gifs don't support true transparency.
If this doesn't work can you provide the image you are trying to save (gif and png, I don't have AI right now)? Maybe there will be something I can do about the size or clearing the gif's edges.
transparent GIFs don't have an 8-bit alpha channel, like PNG does: a pixel in a GIF is either there, or it's not: if it's there, you can't see through it. This often means that an edge between transparent and non-transparent areas looks blocky.
There are two ways to deal with this... either use a PNG 24 (and the Illustrator Save for Web feature will help you to make it smaller), or in Illustrator create a background color layer behind your image before you export to GIF. If this background color layer is the same as the website you put the image on, the edges will blend nicely.