8 Replies Latest reply: May 24, 2012 2:17 PM by mrpking RSS

    How to resize and maintain height and width ratio IR image column

    mrpking
      Hello, I am upgrading from 3.2 to 4.1 reports that include images in report columns. I have had good success with this except for one thing. If the height and width is fixed it distorts the photos, and if I do not have fixed dimensions the image may be too large depending on the original dimensions of the :P1_PHOTO item which is File Browse... BLOB column. I do not want to restrict users ability to upload large image files, or files with different dimensions, but I want them to display as a thumbnail size proportional to the original dimensions in the report, or maybe I need a different approach? Report region template is No Template. I appreciate any suggestions.

      select decode(nvl(dbms_lob.getlength(photo),0),0,null,'<img src="'||apex_util.get_blob_file_src('P1_PHOTO',id)||'" height="75" width="75"/>') photo from table.

      I tried using percent i.e.: width="10%" that does not work.
      I have tried several variations of <style> in page HTML header to change column width, but the image size does not change.

      <style>
      td[headers="PHOTO"] {
      width:75px;
      }
      </style>

      <style>
      #apexir_PHOTO{width: 75px;}
      </style>

      Thanks.
        • 1. Re: How to resize and maintain height and width ratio IR image column
          Tom Petrus
          Try to go with max-width / max-height. However, if you have IE browser, hang on for pain. For some ideas, some links:
          http://wordpress.mfields.org/2011/scaling-images-in-ie8-with-css-max-width/ (ignore object-fit, it is not yet supported on most browser)
          http://stackoverflow.com/questions/3915219/max-width-on-img-tag-not-working-in-ie8
          etc. Be sure to try out your chosen solution on the target browser(s)!
          IE is just nasty :(

          What i have done before is not to have my browser scale my images, especially when the images can be large(r) and you expect quite some traffic. All those extra (kilo)bytes won't help it load faster. I just added an extra column in the table, like photo_thumb, and create a scaled version of the uploaded picture when it is being inserted.
          For example, i have the following process on my apex page, and i'm using wwv_flow_files.
          Have some code:
          IF :P3_FIND_PHOTO IS NOT NULL THEN
             DECLARE
               v_id number;
               v_small_photo blob;
               v_large_photo blob;
               v_mime_type apxt_contacts_img.mime_type%type;
               v_content_type apxt_contacts_img.content_type%type;
             BEGIN
                SELECT blob_content a, blob_content b, mime_type, content_type
                INTO v_small_photo, v_large_photo, v_mime_type, v_content_type
                FROM wwv_flow_files 
                WHERE name = :P3_FIND_PHOTO;
          
                IF lower(v_mime_type) NOT IN ('image/jpg', 'image/jpeg') THEN
                   raise_application_error(-20001, 'File for upload is not a jpg!');
                END IF;
          
                -- Rezise the photo so that it is proportionally 125*125
                -- ordimage is an oracle type able to manipulate all sorts of pictures
                ordimage.process(v_small_photo, 'maxScale=125 125');
          
                -- If contact is of type personnel, then no need to store
                -- a large photo since it wont be displayed
                IF :P3_CONTACT_TYPE_ID = 2 THEN
                  v_large_photo := NULL;
                END IF;
          
                -- Delete previously uploaded picture
                IF :P3_ID IS NOT NULL THEN
                   DELETE FROM apxt_contacts_img
                    WHERE contact_id = :P3_ID;
                END IF;
                
                -- Insert the data into the contacts_img table as a 
                -- SELECT from WWV_FLOW_FILES
                INSERT INTO apxt_contacts_img
                (contact_id,
                 image_name,
                 mime_type,
                 content_type,
                 filename,
                 small_photo,
                 large_photo)
                VALUES
                (:P3_ID,
                 :P3_LASTNAME,
                 v_mime_type,              
                 v_content_type,
                 :P3_FIND_PHOTO,
                 v_small_photo,
                 v_large_photo);
          
                -- Remove the image from the apex wwv_flows_files table
                DELETE FROM wwv_flow_files WHERE name = :P3_FIND_PHOTO;
             END;
          END IF;
          • 2. Re: How to resize and maintain height and width ratio IR image column
            mrpking
            That is great! Thanks. Now I am trying to display the new column. I tried using the same syntax as original BLOB column but get nulls. How is ordimage displayed in a report?

            select
            decode(nvl(dbms_lob.getlength(photo),0),0,null,'<img src="'||apex_util.get_blob_file_src('P1_PHOTO',id)||'" max_height="75" max_width="75"/>') photo,
            decode(nvl(dbms_lob.getlength(small_photo),0),0,null,'<img src="'||apex_util.get_blob_file_src('P1_SMALL_PHOTO',id)||'"/>') smallphoto
            ...
            from table

            Since I already had the table with BLOB column I took a few shortcuts to test the new column, but was able to follow the PL/SQL you gave. Thanks.

            Peter
            • 3. Re: How to resize and maintain height and width ratio IR image column
              mrpking
              Tom,

              I may have the answer with this link. Sorry to be a pain.

              http://spendolini.blogspot.com/2005/10/manipulating-images-with-database.html

              Peter
              • 4. Re: How to resize and maintain height and width ratio IR image column
                Tom Petrus
                Peter,

                were you able to display images for your original blob column?
                Can you share your report query? I'd like to know if your table containing your blob is also the one containing your data. If it is not, then there is some extra work to do.

                Your link points also to the use of ordimage, true, but the method to display images there is by using a public synonym for a database procedure. That is one way of solving it.
                apex_util.get_blob_file_src is another one, but it requires may require a special trick.

                I also ran in some trouble with this some time ago. {message:id=3859537} in {thread:id=977177} has helped me a lot in understanding why this all happens. In short, apex_util.get_blob_file_src requires a file browse and ARP process. The easiest way to solve this is to create a page with just these 2 things on it, which i usually name something like 'photohack'. Then on the page you wish to get the blob on, simply refer to the file browse item on that page. Worked splendidly for me so far, and no creation of procedures and public synonyms necessary (which can be a pain to get in some cases...)
                For example, i have the process and file browse item on page 30. I want to display an image on page 10. i use <img src="apex_util.get_blob_file_src('P30_PHOTO_ITEM', <id>)", where <id> would be the primary key of your table holding the image blob!
                +Shamelessly ripped this from my post in {thread:id=2363575}+

                In your case, on an IR page, you could simply make a hidden file browse item, and an automated row processing process with a condition of 'never' instead of using another page for this.

                If that doesn't help you, clarify further.
                And please assign Helpful and/or Answered tags to the posts that did it for you, so posterity can be saved. :-)
                • 5. Re: How to resize and maintain height and width ratio IR image column
                  mrpking
                  Tom,

                  Thanks, that worked beautifully. That is exactly what I was looking for. I used the APEX "How-To" Display and use blob data tutorial originally. Now I know how ORDImage works. This is fantastic!

                  Peter

                  select
                  "ID",
                  "TYPE_CODE",
                  "DESCRIPTION",
                  "CREATE_DATE",
                  "EXPIRE_DATE",
                  "EXTEND_DATE",
                  "USERID",
                  "CONTACT",
                  decode(nvl(dbms_lob.getlength(photo),0),0,null,'<img src="'||apex_util.get_blob_file_src('P1_PHOTO',id)||'" height="100" width="100"/>') photo,
                  '<img src="'||apex_util.get_blob_file_src('P1_SMALL_PHOTO', id)||'"/>' smallphoto,
                  "FILENAME",
                  "MIMETYPE",
                  "LAST_UPDATE_DATE"
                  from "BB_ITEMS"
                  where approved is not null
                  and sysdate < expire_date+30

                  I used this to test existing rows after adding small_photo blob column. It already had the ARP and I added the second browse file item P1_SMALL_PHOTO.

                  DECLARE
                  v_small_photo blob;
                  BEGIN
                  select photo
                  INTO v_small_photo
                  FROM bb_items
                  WHERE id=1843
                  for update;

                  ordimage.process(v_small_photo, 'maxScale=125 125');

                  update bb_items
                  set small_photo=v_small_photo
                  where id=1843;

                  END;
                  • 6. Re: How to resize and maintain height and width ratio IR image column
                    mrpking
                    Tom,

                    This was interesting. When I ran a new process called create small photo (below), it updated the small_photo column, but it also resized the original photo. I tried an image with dimensions 2200x1700. Works great. But if I ran the new process it also changed photo to 75x57. :P2_PHOTO2 is File Browse display only. Source is return '<img src="'||apex_util.get_blob_file_src('P2_PHOTO',:P2_ID)||'" />';
                    :P2_PHOTO is database column photo. I fixed it by declaring variables for photo and small_photo and set both in the new improved process (below). Thanks again.

                    Peter

                    --RESIZES ORIGINAL PHOTO
                    DECLARE
                    v_id          number;
                    v_small_photo     blob;

                    BEGIN
                    select photo
                    into v_small_photo
                    from bb_items
                    where id=:P2_ID;
                    ordimage.process(v_small_photo, 'maxScale=75 75');
                    update bb_items
                    set small_photo=v_small_photo
                    where id=:P2_ID;
                    END;

                    --RETAINS ORIGINAL PHOTO DIMENSIONS
                    DECLARE
                    v_photo blob;
                    v_small_photo     blob;

                    BEGIN
                    select photo, photo
                    into v_photo, v_small_photo
                    from bb_items
                    where id=:P2_ID;
                    ordimage.process(v_small_photo, 'maxScale=75 75');
                    update bb_items
                    set photo=v_photo, small_photo=v_small_photo
                    where id=:P2_ID;
                    END;
                    • 7. Re: How to resize and maintain height and width ratio IR image column
                      Tom Petrus
                      Yes, that is correct. It's what i also did in the code i posted, but probably wasn't obvious enough.
                      I put the original blob in v_small_photo, and then pass this to ordimage, which resizes that blob. In a previous post i was wrong that it took a blob and returned one, i guess i'm too used to functions for things like this! But when looking at ordImage, it becomes clear that the blob is an IN OUT parameter - as you figured out by yourself.
                      • 8. Re: How to resize and maintain height and width ratio IR image column
                        mrpking
                        Tom,

                        Yes, it was in the code you posted, and I missed it. I tend to learn things the hard way. All's well that ends well! Thanks again.

                        Peter