Is there any way use jpeg with transparency or replace some color with transparency

[user471]

I want to use jpeg to reduce size of some images, but I need a transparency.

So, I want replace png transparent color with green, convert images to jpeg and somehow in game return transparency back.

Is there any way to do that?

[Kuboid]

Hi,

 

you can create an alphamap which fits to your jpg. The alphamap is a 8-bit-png which only contains black / transparency. Size of  both files still is smaller than a "normal" png but you have 1 more request.

Asking google for 10 seconds gave me this result: http://kaioa.com/node/104

 

I think you also could load your jpg file into a canvas, go through each pixel, ask for a specific colorvalue and make it transparent if you want to...

 

best

[Rezoner]

JPG compression adds a lot of noise - so it is not a really good idea to keep a key-color within the JPG itself (see te image)

 

 

Of course it is do-able by trolling with distance in HSL model.... but you don't really want me to elaborate about it

 

The solution is still very simple. What you want to do is - having a source JPG file and a mask in PNG format (which will take like no-space since there is only one color and transparency).

Then blend them together using proper globalCompositeOperation (which is million times faster than pixel-by-pixel approach)

 

 

How to use the resulting Canvas as a Texture for Phaser/PIXI - I do not know - but someone here will surely help you.

[alex_h]

You make a new image object, take the canvas into which you drew the composite operation then set the image src via canvas.toDataURL()

img.src = canvas.toDataURL();

Then you can generate a PIXI texture from the image as normal.

[Wavertron]

Hmmm, that mask is pretty neat, but I dont understand why you would do this most of the time?

You can use a PNG compression tool like tinypng to shrink them down.

 

Just doing a quick test right now using a png with transparency that is 91kb big:

• Test1 -  loading it into gimp, exported as jpeg (default settings), 41 kb. Nice, less than half size, but transparency lost. I'm sure settings could be tweaked for even smaller size.
• Test2 -  uploaded png to tinypng, downloaded it, 26kb. Wow big drop, and transparency retained.

This is my first time reading into alpha masks, so maybe I'm missing something here, but why bother?

[xerver]

You make a new image object, take the canvas into which you drew the composite operation then set the image src via canvas.toDataURL()

img.src = canvas.toDataURL();

Then you can generate a PIXI texture from the image as normal.

 

Don't do that, you can use a canvas as the source for a texture directly:

var canvas = document.createElement('canvas'),    ctx = canvas.getContext('2d');// draw, draw, drawvar texture = new PIXI.Texture(new PIXI.BaseTexture(canvas)),    sprite = new PIXI.Sprite(texture);// add sprite somewhere in scene.

[kuuuurija]

I am also experimenting with this..

here is the quick implementation of it https://www.pixiplayground.com/#/edit/21pZTogIjtfTqY5kGznsy

Is there better way to do this? without creating texture from canvas.

[damianh82]

I also encountered that issue. I wanted to compress size with jpg images and realised that it does not support alpha channels by default.

I'm using TexturePacker to create spritesheets https://www.codeandweb.com/texturepacker

There is a function to also create the alpha maps. It should be possible to load the images and the alpha maps to create the sprites.

Does anyone have done this before and can tell me how to do this? If not I try try to adapt the solutions from this topic.