Sign in to follow this  
user471

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

Recommended Posts

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?

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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)

 

Tc2Q65T.png

 

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

 

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)

 

yrnAE1O.png

 

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

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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?

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
Sign in to follow this  

  • Recently Browsing   0 members

    No registered users viewing this page.