MarcusRiemer

MarcusRiemer

Layering transparent images using Image.Draw.image

I am attempting to stack multiple PNG images with transparency on top of each other. These are pixel art images for game characters and should work similar to “dressing” a paper doll. The pixels in my images are either fully transparent or fully opaque, there is no “partial” transparency going on.

I’m more or less porting code from a JavaScript canvas to a Phoenix Controller generating the image on the fly.

defmodule RenderCharacterController do
  use Web, :controller

  def get(conn, params) do
    result_image = Image.new!(832, 1344, color: [0, 0, 0, 0])

    gender = Map.get(params, "gender", "male")

    layers = [
      Image.open!("priv/static/lpc/body/#{gender}/light.png"),
      Image.open!("priv/static/lpc/head/#{gender}/light.png"),
      Image.open!("priv/static/lpc/hair/buzzcut/adult/blue.png"),
      Image.open!("priv/static/lpc/torso/longsleeve/#{gender}/red.png")
    ]

    result_image = Enum.reduce(layers, result_image, & Image.Draw.image!(&2, &1, 0, 0, mode: :VIPS_COMBINE_MODE_ADD))
    binary = Image.write!(result_image, :memory, suffix: ".png", minimize_file_size: true)

    conn
    |> put_resp_content_type("image/png")
    |> send_resp(200, binary)
  end

end

The result is however not what I expected. I’m sadly not allowed to upload images, so please bare with to imgur. You can also see them all at once: Imgur: The magic of the Internet

So clearly :VIPS_COMBINE_MODE_ADD is not the correct way to blend / draw transparent images on top of each other like a JavaScript Canvas would do. The only other mode is however :VIPS_COMBINE_MODE_SET and this ignores transparency and completely hides the first image behind the second image. I would require something along the line of :VIPS_COMBINE_MODE_SET_UNLESS_FULLY_TRANSPARENT.

Does anyone have an idea how to stack images like this using the Image library? Or any other library for that matter.

Marked As Solved

kip

kip

ex_cldr Core Team

The appropriate way to do this is to use Image.compose/2.

The Image.Draw functions should be avoided since they mutate the image and break image pipelines.

(On my phone, will aim for a more comprehensive example later).

Also Liked

kip

kip

ex_cldr Core Team

There are some examples of how to compose here: Image - an image processing library based upon Vix - #17 by kip

MarcusRiemer

MarcusRiemer

Thanks alot! Swapping out the call made all the difference I wanted. If you are stumbling over this from the future, this is what worked for me:

layers = [
  Image.open!("priv/static/lpc/body/#{gender}/light.png"),
  Image.open!("priv/static/lpc/head/#{gender}/light.png"),
  Image.open!("priv/static/lpc/hair/buzzcut/adult/blue.png"),
  Image.open!("priv/static/lpc/torso/longsleeve/#{gender}/red.png")
]

result_image = Enum.reduce(layers, result_image, & Image.compose!(&2, &1, x: 0, y: 0))

Where Next?

Popular in Questions Top

openscript
Hello! Sorry for this astonishing simple question, but I’m really stuck. I try to set up the intellij-elixir plugin, but I don’t know ho...
New
jerry
Good day to you all. I have been struggling to get a query involving like and ilike to work. Can anyone assist me on this, please? pro...
New
polypush135
As many of you may have realized by now (sorry for all the posts here) I’ve been working on a db problem where I’m trying to aggregate a ...
New
freewebwithme
Using vs code and installed ElixirLS: support and debugger. And I got an error popped up on start up says Failed to run ‘elixir’ comma...
New
qwerescape
Is there a way to get the call stack or stack trace at any point in the code? Not from exceptions, but an expression that returns how the...
New
fayddelight
I tried installing elixir 1.11.2 erlang 23.3.4 via asdf in my zsh shell. Enabled the versions locally and globally. When I list them ...
New
shahryarjb
Hello, I have map which I want to convert it to string like this: the map: %{last_name: "tavakkoli", name: "shahryar"} the string I ne...
New
fireproofsocks
Forgive me if this is obvious, but how does one delete a database record WITHOUT selecting it first? https://hexdocs.pm/ecto/Ecto.Repo.h...
New
WestKeys
Currently suffering from paralysis by [HTTP client] analysis. This is rather unusual in Elixirland as there tends to be consensus on the ...
New
skosch
To my knowledge, put_in, Map.update etc. all have the one limitation of not automatically creating intermediate keys when needed (for exa...
New

Other popular topics Top

Brian
What is the proper way to load a module from a file in to IEX? In the python world, doing something like this pretty standard: from ....
New
vonH
In asking this question I am more interested about the expressiveness of the language itself and less concerned about the availability of...
New
sergio
I couldn’t find any guides that worked well with Phoenix 1.6.0 and esbuild. I hope this helps people test the waters and eases you into t...
New
KronicDeth
Elixir plugin for JetBrain’s IntelliJ Platform (including Rubymine) This is a plugin that adds support for Elixir to JetBrains IntelliJ...
289 35421 110
New
chrismccord
This release brings a number of exciting features, including integration with the new Phoenix LiveDashboard and Phoenix LiveView. There h...
New
hariharasudhan94
I would like to know what is the best IDE for elixir development?
New
minhajuddin
I have seen a lot of code which picks the first element from a list using Enum.at(0) instead of List.first. Is there a reason why people ...
New
fayddelight
I tried installing elixir 1.11.2 erlang 23.3.4 via asdf in my zsh shell. Enabled the versions locally and globally. When I list them ...
New
shahryarjb
Hello, I have map which I want to convert it to string like this: the map: %{last_name: "tavakkoli", name: "shahryar"} the string I ne...
New
electic
Hi, I am new to Elixir. I am trying to use the DateTime component to insert a date into MySQL however the there seems to be no way to fo...
New

We're in Beta

About us Mission Statement