Feature: Support importation of transparent images (alpha channel)

[remusonline]

Cboard currently does not support (at least using firefox or chrome) the importation of transparent images (alpha channel or transparent color). A workaround is to provide images with the same background color as the button color, but it is not practical. Transparent image formats (e.g. gif, png, svg, etc.) should be supported, especially considering that images from mulberry can be displayed with transparency.

Currently, importing a transparent image will result in a black background instead of the expected transparency.

Please contact me or comment on this issue if you need further info. Thanks!

[remusonline]

The following modification should do the trick, but I don't know if there will be side effects to this. The default MIME type for browser-image-resizer is image/jpeg, which does not support transparency. By defining a MIME type of image/png, transparency is now supported. I tried it using png, jpeg and SVG without side effects. Here is the modification to perform in InputImage.component.js (add mimeType: 'image/png' to the configuration):

  async resizeImage(
    file,
    config = {
      quality: 7,
      maxWidth: 200,
      maxHeight: 200,
      autoRotate: true,
      debug: false,
      mimeType: 'image/png'
    }
  )

Can someone try this on their system using other platforms/browsers? I tried it with chrome and firefox on windows, and chrome on Android. Thanks for your feedback!

[martinbedouret]

@remusonline great suggestion !! It worked perfectly, I have added you as a project collaborator and created a PR: #606

[martinbedouret]

this has been added and merged