3 Replies Latest reply on Oct 23, 2012 12:47 PM by beverly

    Snippet to rotate image in a Web Viewer

    JStars

      [Sorry if you get this twice. I think I posted to the wrong forum earlier.

       

      I'm trying to figure out the code I can add to a data URL in a Web Viewer to rotate images. I'm sure there's a simple short line—something like...

       

      style="image-orientation: 90deg"

       

      ... but of course that doesn't seem to work. If you know what it should be, would you please add it to the following code...

       

       

      "data:text/html,<img src="" & PHO::File Path & "" width="" & "100%" & "" />"

       

      I ask that because messing up a single character will cause it to fail and debugging these WVs can be a nightmare. (I can hear you nodding.)

       

      By the way, I'm looking for a way to do this without plug-ins that rotate the original image or lengthy CCS. When it's all done, I imagine using some kind of radio button or scripting to control text in a field which will be used as part of the text html, so I can rotate the WV image regardless of what orientation the picture was taken.

       

      Thanks in advance.

       

      Jonathan Stars

      Data Design Pros, LLC

        • 1. Re: Snippet to rotate image in a Web Viewer
          beverly

          You can try this bit of CSS3, Jonathan

          img style="transform:rotate(90deg);"
          

           

          Reference: http://www.w3schools.com/cssref/css3_pr_transform.asp (there's a "try-it" section to test the CSS)

          Beverly

          • 2. Re: Snippet to rotate image in a Web Viewer
            JStars

            Thanks for the hint, Beverly. I couldn't seem to make that work in my line of code. But when I went to the site your recommended, I found a very clever web slider tool. It wasn't quite what I was looking for, but taking out the slider led me to the following code which works beautifully.

             

            "data:text/html,

            <!DOCTYPE html>

            <html>

            <head>

            <style>

            #div1

            {-ms-transform:rotate(" & WebViewer::Rotation & "deg); /* Firefox */

            -moz-transform:rotate(" & WebViewer::Rotation & "deg); /* Firefox */

            -webkit-transform:rotate(" & WebViewer::Rotation & "deg); /* Safari and Chrome */

            -o-transform:rotate(" & WebViewer::Rotation & "deg); /* Safari and Chrome */

            transform:rotate(" & WebViewer::Rotation & "deg);}

            </style>

            </head>

            <body>

            <div id=\"div1\"><img src=\"" & WebViewer::File Path &  "\" width=\"" &  WebViewer::Width  &  "\" /></div>

            </body>

            </html>"

             

            The Rotation field uses a radio button for 90 degree rotations and the width uses radio buttons for percentages.

             

            Jonathan Stars

            • 3. Re: Snippet to rotate image in a Web Viewer
              beverly

              Yes, the site was meant to be the "answer" as not all browsers support the "standard" of transform:rotate (yet!). You needed the other "options", as well. I just didn't know what browser, so use all of them!

              Beverly