Skip navigation
Hoang_Huynh
Hoang_Huynh Calculating status...
Currently Being Moderated

[JS] PageItem Export to PNG: exported image's dimesion is different from PageItem's

Sep 3, 2012 9:55 PM

Tags: #cs5 #script #frame #text #cs5.5 #export #png #javascript #indesign #images #scripting #cs6 #page #pageitem #item #textframe

When I try to export a rectangular text frame to PNG with JavaScript, the result PNG image may have bigger dimension than that of the text frame itself in InDesign. I believe this has something to do with the line height of the text.

 

Is there any Export option I can use to make the exported image's dimension the same as the text frame's?

 

Please see my attached pictures for an example:

 

  • The text frame in InDesign has a dimension of 400 x 80 (pixels)

frame.png

 

  • This is the exported PNG, which has a dimesion of 400 x 96 (pixels). Notice the padding at the top and bottom of the image.

real-dimension.png

3507 Views   24 Replies   Latest reply: Justin Putney, Nov 6, 2012 8:29 PM
 
Replies
  • Laubender
    Currently Being Moderated
    1. Laubender,
    Sep 4, 2012 3:09 AM   in reply to Hoang_Huynh
    Report

    @Hoang_Huynh – at the moment you do the export, I think, you cannot do much against that. It's the way PNG export is working…
    And it's not only forced by the line height of the text, but could also be caused by effects like drop shadow etc.pp.

    After export, you could open the file in PhotoShop and trim the file to its writing pixels.

     

    You could ask that question at the PhotoShop Scripting forum.

     

    Uwe

     
    |
    Mark as:
  • Harbs.
    Currently Being Moderated
    2. Harbs.,
    Sep 4, 2012 5:14 AM   in reply to Hoang_Huynh
    Report

    Copy the page item to a page with the dimensions of the text frame and export the page.

     
    |
    Mark as:
  • Hoang_Huynh
    Currently Being Moderated
    3. Hoang_Huynh,
    Sep 5, 2012 12:30 AM   in reply to Harbs.
    Report

    Hi Harbs,

     

    That is a great work-around, but I want the PNG background to be transparent. Is it possible with page export?

     
    |
    Mark as:
  • Laubender
    Currently Being Moderated
    4. Laubender,
    Sep 5, 2012 12:31 AM   in reply to Harbs.
    Report

    @Harbs – hm, with that approach you could get into trouble, if you are using the "baseline grid" feature in your paragraphs…

     

    Uwe

     
    |
    Mark as:
  • Hoang_Huynh
    Currently Being Moderated
    5. Hoang_Huynh,
    Sep 5, 2012 12:45 AM   in reply to Laubender
    Report

    @Laubender: Thanks a lot for the info.

     

    I'm thinking about about trimming the image file but the point is I don't know the exact padding pixels InDesign has added to top and bottom of the PNG file. Simply trimming the top or bottom of the file may result in lost of data.

     
    |
    Mark as:
  • Laubender
    Currently Being Moderated
    6. Laubender,
    Sep 5, 2012 12:55 AM   in reply to Hoang_Huynh
    Report

    @Hoang_Huynh – did you try with PhotoShop to trim the size to the writing pixels?

     

    Your background in the PNG are white pixels? Or can you export with a transparent background, so it would be easy in PhotoShop to make a trim area for writing pixels only?

     

    The "padding" you see might  vary, if you choose other examples. So I would not bet on a fixed count of pixels to cut…

     

    Uwe

     
    |
    Mark as:
  • Laubender
    Currently Being Moderated
    7. Laubender,
    Sep 5, 2012 12:59 AM   in reply to Hoang_Huynh
    Report

    You'll get transparent pixels, if you choose "transparentBackground = true" in the PNG export preferences of InDesign CS6.
    This is a new feature in CS6 and not available in older versions.

     

    Uwe

     
    |
    Mark as:
  • Hoang_Huynh
    Currently Being Moderated
    8. Hoang_Huynh,
    Sep 5, 2012 1:55 AM   in reply to Laubender
    Report

    @Laubender: Thanks, but I want to trim the PNG to the exact dimensions of the text frame. Is it possible?

     

    P.S. I believe in InDesign CS5.5 and older versions, the PNGs background are set to transparent by default although there is no transparentBackground option. This is, however, set to non-transparent by default in InDesign CS6, and we need to use the mentioned option.

     
    |
    Mark as:
  • Laubender
    Currently Being Moderated
    9. Laubender,
    Sep 5, 2012 2:02 AM   in reply to Hoang_Huynh
    Report

    Thanks, but I want to trim the PNG to the exact dimensions of the text frame.

    To get the exact dimensions of the text frame in relation to your exported PNG is hard, because the "offset" is not predictable.
    You could export the whole page and crop to the geometricBounds of the text frame…

     

    With a transparent background you could use PhotoShop to crop to the writing pixels.

    But this seems not the thing you want.

     

    You could use InDesign scripting in conjunction with PhotoShop scripting by using "BridgeTalk" (that's not scripting the "Bridge" app ;-)).

     

    Uwe

     
    |
    Mark as:
  • Laubender
    Currently Being Moderated
    10. Laubender,
    Sep 5, 2012 2:09 AM   in reply to Laubender
    Report

    The easy way would be the one Harbs suggested.

    Provided you do not use the baseline grid in your paragraph formatting…


    Duplicate the text frame to a new document using the geometric bounds of the text frame as page size and export from there.

     

    Uwe

     
    |
    Mark as:
  • Laubender
    Currently Being Moderated
    11. Laubender,
    Sep 5, 2012 2:18 AM   in reply to Laubender
    Report

    In CS6 you could define the "pngExportRange" with a page string definition. I did not try that, but I hope in that way you will not get any additional pixels.

     

    But if that will not work and you also get additional pixels with that method, you need to export to PDF (it's always the whole page), open the PDF in PhotoShop with some rendering options (color space and resolution) and save it from there as PNG. Use the export to web functionality there, which will minimize the file size in contrast to the "normal" save-as function.

     

    Uwe

     
    |
    Mark as:
  • -hans-
    Currently Being Moderated
    12. -hans-,
    Sep 5, 2012 2:27 AM   in reply to Laubender
    Report

    Hi Hoang_Huynh and Uwe,

     

    getting the TextFrame-bounds, exporting a page to pdf, creating a new doc in textframesize, import and position the pdf, export to png ...

     

    may be the complicated way ;-)

     
    |
    Mark as:
  • [Jongware]
    Currently Being Moderated
    13. [Jongware],
    Sep 5, 2012 3:02 AM   in reply to Hoang_Huynh
    Report

    There seems to be some problem with aligning your text to the very top of the frame. You can see this if you add a black stroke to the text frame before exporting -- left, right, and bottom align perfectly, on the top you can see some additional padding. Presumably it has something to do with ascenders? font size? default line height?

     

    You can solve it by tricking ID. Create a new, empty rectangle the exact size of the text frame, copy text frame, paste "into" the new rectangle, and export this instead. This way, the new rectangle acts as a clipping mask, and the excess space will be cropped off.

     
    |
    Mark as:
  • [Jongware]
    Currently Being Moderated
    14. [Jongware],
    Sep 5, 2012 3:21 AM   in reply to [Jongware]
    Report

    Hmm -- moving any item "into" a rectangle is not a straightforward operation. Well, let's (ab)use "app.copy" and "app.paste" then, although, theoretically at least, it should be possible by manipulating the objects.

     

    This duplicates the selected item, removes its contents, sets stroke and fill to none, and then pastes the original selection into the new one. After exporting, the duplicated object automatically gets deleted so you end up with what you started with.

     

    (Warning! Tested only with CS4!)

     

    obj = app.activeDocument.selection[0];
cliprect = obj.duplicate(undefined, [0,0]);
cliprect.texts[0].remove();
cliprect.strokeWeight = 0;
cliprect.fillColor = app.activeDocument.swatches.item("None");
cliprect.contentType = ContentType.UNASSIGNED;
app.copy();
app.select(cliprect);
app.pasteInto();
cliprect.exportFile(ExportFormat.PNG_FORMAT, File(new File("~/Desktop/test.png")));
cliprect.remove();
     
    |
    Mark as:
  • Hoang_Huynh
    Currently Being Moderated
    15. Hoang_Huynh,
    Sep 5, 2012 5:04 AM   in reply to [Jongware]
    Report

    @Jongware: You're a star! Your trick just works exactly the way I want. I have successfully tested it in CS5.5 and CS6. Thank you!

     

    @Laubender, hans and Harbs: While the work-around to copy the text frame to a new document with the same dimensions may work too, it cannot produce transparent PNGs and is more complicated.

     
    |
    Mark as:
  • Laubender
    Currently Being Moderated
    16. Laubender,
    Sep 5, 2012 10:38 AM   in reply to Hoang_Huynh
    Report

    it cannot produce transparent PNGs

    Glad, it's working for you!

    About the not working transparency: did you test with InDesign CS6?

     

    Uwe

     
    |
    Mark as:
  • Justin Putney
    Currently Being Moderated
    17. Justin Putney,
    Oct 5, 2012 2:45 PM   in reply to [Jongware]
    Report

    Any ideas on how to do this without paste? I want to preserve the user's clipboard.

     
    |
    Mark as:
  • Justin Putney
    Currently Being Moderated
    18. Justin Putney,
    Oct 5, 2012 5:00 PM   in reply to Justin Putney
    Report

    It occurs to me that I might paste the whatever's in the clipboard to a holding area beforehand and re-copy it once I'm done...I'm open to better ideas, though.

     
    |
    Mark as:
  • Harbs.
    Currently Being Moderated
    19. Harbs.,
    Oct 7, 2012 1:47 AM   in reply to Justin Putney
    Report

    My suggestion will work without involving the clipboard.

     
    |
    Mark as:
  • Justin Putney
    Currently Being Moderated
    20. Justin Putney,
    Oct 7, 2012 12:19 PM   in reply to Harbs.
    Report

    Thanks, Harbs. I also need transparency. Unfortunately, I've found that the visible bounds do not include effects (like drop shadow), but pageItem.exportFile does. For my purposes, I think I just need to be able to calculate how much padding is created based on the first line of text.

     
    |
    Mark as:
  • Hoang_Huynh
    Currently Being Moderated
    21. Hoang_Huynh,
    Oct 12, 2012 11:33 PM   in reply to Justin Putney
    Report

    Justin Putney wrote:

     

    For my purposes, I think I just need to be able to calculate how much padding is created based on the first line of text.

    Yes exactly what I first thought of -- but there is no way to calculate it. And don't forget that the text frame can also be rotated or flipped, which makes calculation a lot harder.

     
    |
    Mark as:
  • Laubender
    Currently Being Moderated
    22. Laubender,
    Oct 13, 2012 12:00 AM   in reply to Hoang_Huynh
    Report

    You could calculate it, if you open the PNG (including transparency) in PhotoShop and get a selection of its "drawing" pixels. You then could have it's real dimensions including effects and crop the PNG accordingly. This would be possible by using some BridgeTalk and PhotoShop scripting.

     

    Uwe

     
    |
    Mark as:
  • Justin Putney
    Currently Being Moderated
    23. Justin Putney,
    Nov 6, 2012 4:40 PM   in reply to Justin Putney
    Report

    P.S. You can actually see the discrepancy when you select the text. The selection rectangle seems show were the "actual" top of the TextFrame is:

    Screen Shot 2012-11-06 at 4.38.34 PM.png

     

    Any ideas on how to get the bounds for that?

     
    |
    Mark as:
  • Justin Putney
    Currently Being Moderated
    24. Justin Putney,
    Nov 6, 2012 8:29 PM   in reply to Justin Putney
    Report

    I think I found it: you can check the ascent value of the first paragraph and adjust according to that value.  Nope

     
    |
    Mark as:
Actions

More Like This

  • Retrieving data ...

Incoming Links

Bookmarked By (1)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points