Transparent background in blending images

Help
syamashi
2012-07-16
2013-11-20
  • syamashi

    syamashi - 2012-07-16

    Hello,

    I would like to know if having transparent background images and blend them in
    the IIPMooViewer is doable. I have noticed that TIF file format does not
    support transparency so I've been trying to see if JPEG2000 works or not. So
    far, I have not been able to convert the white background into transparent.
    It'd be great if you can advise me if transparent background is doable in the
    IIPMooViewer or not.

    Here are the commands I'm running to convert either TIF files or JPEG2000
    files into the format compatible in IIP:

    convert {tiff file} -transparent white -define numrlvls=7 -define jp2:tilewidth=1024 -define jp2:tileheight=1024 -define jp2:rate=0.02348 -define jp2:prg=rpcl -define jp2:mode=int -define jp2:prcwidth=1024 -define jp2:prcheight=1024 -define jp2:cblkwidth=64 -define jp2:cblkheight=64 -define jp2:sop {output file}
    
    convert {jpeg2000 file} -define numrlvls=7 -define jp2:tilewidth=1024 -define jp2:tileheight=1024 -define jp2:rate=0.02348 -define jp2:prg=rpcl -define jp2:mode=int -define jp2:prcwidth=1024 -define jp2:prcheight=1024 -define jp2:cblkwidth=64 -define jp2:cblkheight=64 -define jp2:sop {output file}
    

    If having a transparent background is not doable, are there other workarounds
    to implement this feature in the viewer?

    Thank you for your help,
    syamashi

     
  • syamashi

    syamashi - 2012-07-17

    Hello again,

    I may need to correct that both TIF and JPEG2000 seem to support transparent
    background. However, I still haven't been able to convert those files, into
    IIPImage compatible formats. I tried both TIF and JPEG2000. I believe those
    are made transparent since they show gray and white tiles in Photoshop. Would
    you be able to advise me on how to convert these transparent background files
    so that I can use them in IIPImageViewer?

    I'm using ImageMagick to convert into tiles as described in,

    http://iipimage.sourceforge.net/documentation/images/
    http://help.oldmapsonline.org/jpeg2000/

    Thank you for your help,
    syamashi

     
  • Ruven

    Ruven - 2012-07-17

    The IIPImage server does not currently handle transparency, so you will need
    to remove the alpha channel from your images. See
    here to see how to do this in imagemagick.

    For the viewer, even if there is no alpha channel, you can blend images with
    different levels of transparency. See, for example, the image blending demos.

     
  • syamashi

    syamashi - 2012-07-17

    Hi Ruven,

    Thanks for your response. What I'm trying to accomplish here is to overlay
    multiple layers(images) with clustered dots on top of a base layer which is
    like a map. As you mentioned in the blending example, changing the opacity
    levels of image tags do not completely get rid of the white backgrounds which
    come with the clustered dots. As a result, underneath or intermediate layers
    with dots get blurred from the white backgrounds of the top layers. Since I
    can't make those white background transparent without affecting the dots, do
    you have any suggestions I might be able to accomplish this?

    Thanks again,
    syamashi

     
  • Ruven

    Ruven - 2012-07-17

    Try making the backgrounds black rather than white. Alternatively have you
    thought about using SVG for your dots?

     
  • syamashi

    syamashi - 2012-07-18

    Hi Ruven,

    Thank you for your inputs. Setting a black background seems to work better
    than a white background. I need to test with more layers to see if this is
    doable. By the way, is it possible to set the opacity levels once all the
    images have been loaded?

    Alternatively have you thought about using SVG for your dots?

    I'm not sure how SVG can use to synch the zoomin/zoomout and scrolls in the
    viewer. How is that possible? Sorry, I'm not too familiar with SVGs.

    Thanks again,
    syamashi

     
  • Ruven

    Ruven - 2012-07-18

    I'm not sure how SVG can use to synch the zoomin/zoomout and scrolls in the
    viewer. How is that possible? Sorry, I'm not too familiar with SVGs.

    You could modify the iipmooviewer annotation code to show SVG instead of HTML
    divs.

     
  • syamashi

    syamashi - 2012-07-18

    You could modify the iipmooviewer annotation code to show SVG instead of
    HTML divs.

    Great, that helps a lot. Thank you.

    Just for the curiosity, will the transparency feature be supported in the
    future release?

     
  • Ruven

    Ruven - 2012-07-19

    Just for the curiosity, will the transparency feature be supported in the
    future release?

    No, because JPEG, which is what is sent to the client, cannot handle alpha
    channels.

     
    • Anonymous - 2013-11-19

      Are there any imminent plans to implement the CVT argument to allow output of PNG files, thus allowing alpha transparency to be preserved?

       
      • Ruven

        Ruven - 2013-11-20

        Yes, it's on the list of features to add to IIPImage. I can't tell you when it'll be implemented, though.

         
  • syamashi

    syamashi - 2012-07-20

    Hi Ruven,

    I have a couple more questions I hope you don't mind answering to them with
    the SVG approach which might still hold bottlenecks to what I'm trying to do.

    Questions:

    1. Unlike the annotations, I plan to overlay a SVG on an entire image rather partially. Having adjusted the z-index of the SVG, it seems to block the events on the image such as mouse drag, click and so on. Is it possible to propagate these events to the viewer, underneath image tags, without having to hide SVGs?

    2. The content of the SVGs could easily go up to several mega bytes in size. Importing SVG files with an "object" tag could be an option but is it still adjustable in size as you do with divs on annotations? I don't think I can manipulate on DOMs of the imported SVG, can I?

    3. If I want to instanciate a SVG element in Mootools, I would have to generate from a string and that seems to be supported with Elements.From of MooTools More v1.4s. Is it IIPMooViewer2.0 compatible? If not, do you suggest any other way to instanciate an Element with big SVG?

    Thanks again,
    syamashi

     
  • Ruven

    Ruven - 2012-07-20
    1. Unlike the annotations, I plan to overlay a SVG on an entire image rather
      partially. Having adjusted the z-index of the SVG, it seems to block the
      events on the image such as mouse drag, click and so on. Is it possible to
      propagate these events to the viewer, underneath image tags, without having to
      hide SVGs?

    I'm not sure. In theory it should propagate if the svg is put within the div
    created by the viewer (with class "canvas"). But I've never tried myself.

    1. The content of the SVGs could easily go up to several mega bytes in size.
      Importing SVG files with an "object" tag could be an option but is it still
      adjustable in size as you do with divs on annotations? I don't think I can
      manipulate on DOMs of the imported SVG, can I?

    Yes, you can manipulate the DOM of an SVG. However, if they are several MB in
    size, then perhaps SVG is not the best solution to this.

    1. If I want to instanciate a SVG element in Mootools, I would have to
      generate from a string and that seems to be supported with Elements.From of
      MooTools More v1.4s. Is it IIPMooViewer2.0 compatible? If not, do you suggest
      any other way to instanciate an Element with big SVG?

    I've used Raphael.js to create and manipulate SVG and is compatible with
    Mootools. Otherwise you can use Mootools directly as you say. Again I've never
    tried with the viewer, so you'll just have to try things out.

     


Anonymous

Cancel  Add attachments





Get latest updates about Open Source Projects, Conferences and News.

Sign up for the SourceForge newsletter:





No, thanks