Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to fit image size on excel WebBrowser control

Tags:

html

excel

vba

I have WebBrowser control named WebBrowser1.

I use it to display images by its URL using this code.

WebBrowser1.Navigate ("https://cdn2.iconfinder.com/data/icons/modern-latin-alphabet-lowercase-and-uppercase-lett/154/alphabet-uppercase-letter-z-512.png")

It works great but the image is bigger than WebBrowser control.

So I need to fit the image size to fit in the WebBrowser control size.

like image 408
ahmed khames Avatar asked Jan 07 '23 02:01

ahmed khames


1 Answers

Try this code to fit image width:

Sub Test()
    
    UserForm1.Show
    UserForm1.WebBrowser1.Navigate "about:blank"
    UserForm1.WebBrowser1.Document.Write "<img style=""width:100%;"" src=""https://cdn2.iconfinder.com/data/icons/modern-latin-alphabet-lowercase-and-uppercase-lett/154/alphabet-uppercase-letter-z-512.png"">"
    
End Sub

Now you might want to fit the image both height and width, after all, all modern browsers support CSS object-fit for that, luckily except the IE ;) So, to fit image to viewport preserving aspect ratio it's necessary to find the smallest ratio of height and width, and fit image in that dimension by setting it to 100%. It could be done by CSS or javascript embed in document, but for VBA purposes the below code works pretty good. Also WebBrowser control init and separate procedure for displaying defined image added for robustness.

Assumed there is UserForm1, ShowModal set to False, with WebBrowser control. Place the below code in UserForm module:

Private Sub UserForm_Initialize()
    
    With Me.WebBrowser1
        .Navigate "about:blank"
        .Document.Write "<body style='background-color: buttonface; overflow: hidden;'></body>"
    End With
    
End Sub

Public Sub displayImage(src)
    
    With Me.WebBrowser1
        .Document.Close
        .Document.Write "<body id='body' style='background-color: buttonface; overflow: hidden; margin: 0; text-align: center;'><img id='img' src='" & src & "'></body>"
        Dim img
        Set img = .Document.getElementById("img")
        Dim body
        Set body = .Document.getElementById("body")
        If body.ClientHeight / img.ClientHeight < body.ClientWidth / img.ClientWidth Then
            img.Style.Height = "100%"
        Else
            img.Style.Width = "100%"
        End If
    End With
    
End Sub

Place Test1 in standard module and call it to display image:

Sub Test1()
    
    UserForm1.Show
    UserForm1.displayImage "https://i.stack.imgur.com/B8imb.gif"
    
End Sub

You may also embed base64 encoded image into the code (use any of the online Base64 Image Encoders), see Test2 example:

Sub Test2()
    
    UserForm1.Show
    UserForm1.displayImage _
        "data:image/png;base64," & _
        "iVBORw0KGgoAAAANSUhEUgAAAQAAAAEACAYAAABccqhmAAAACXBIWXMAAA7DAAAOwwHHb6hkAAADoklE" & _
        "QVR4nO3dwW2DQBBAUYjSaWSKikytTgMcgmS8K/57BaA5fc2BgXV5PF8LkPQ1egBgHAGAMAGAMAGAMAGA" & _
        "MAGAMAGAMAGAMAGAMAGAMAGAMAGAMAGAMAGAMAGAMAGAMAGAMAGAMAGAMAGAMAGAMAGAMAGAMAGAMAGA" & _
        "MAGAMAGAMAGAMAGAMAGAMAGAMAGAMAGAMAGAMAGAMAGAMAGAsO/RA/AZr9+f0SPcyrrto0d4CxsAhAkA" & _
        "hAkAhAkAhAkAhAkAhAkAhAkAhAkAhAkAhAkAhLkF4NDV77qfvU2YbZ67sAFAmABAmABAmABAmABAmABA" & _
        "mABAmABAmABAmABAmABAmABAmABAmABAmABAmABAmABAmABAmABAmABAmABAmABAmABAmP8CcGi27+TP" & _
        "Ns9d2AAgTAAgTAAgTAAgTAAgTAAgTAAgTAAgTAAgTAAgTAAgzC1AxLrto0f4KLcD/2MDgDABgDABgDAB" & _
        "gDABgDABgDABgDABgDABgDABgDABgLDb3AJ49/vearcMn2IDgDABgDABgDABgDABgDABgDABgDABgDAB" & _
        "gDABgDABgLDb3AKcdfW75WdvE8zDCDYACBMACBMACBMACBMACBMACBMACBMACBMACBMACBMACBMACBMA" & _
        "CBMACBMACBMACBMACBMACBMACBMACBMACBMACBMACMv+F2C279KbhxFsABAmABAmABAmABAmABAmABAm" & _
        "ABAmABAmABAmABAmABCWvQVYt/3S5599l36meWaahWvZACBMACBMACBMACBMACBMACBMACBMACBMACBM" & _
        "ACBMACBMACBMACBMACBMACBMACBMACBMACBMACBMACBMACBMACBMACAs+1+A2b5NP9M8M83CtWwAECYA" & _
        "ECYAECYAECYAECYAECYAECYAECYAECYAECYAEJa9BZjNuu2XPt/7/RyxAUCYAECYAECYAECYAECYAECY" & _
        "AECYAECYAECYAECYAECYAECYAECYAECYAECYAECYAECYAECYAECYAECYAECYAECYAECYAECYAECYAECY" & _
        "AECYAECYAECYAECYAECYAECYAECYAECYAEDYujyer9FDAGPYACBMACBMACBMACBMACBMACBMACBMACBM" & _
        "ACBMACBMACBMACBMACBMACBMACBMACBMACBMACBMACBMACBMACBMACBMACBMACBMACBMACBMACBMACBM" & _
        "ACBMACBMACBMACBMACBMACBMACBMACBMACDsD0NPOfMjSKzzAAAAAElFTkSuQmCC"
    
End Sub

The easiest way I found to remove WebBrowser control sunken border is... simply "crop" by moving them outside the UserForm border (by setting Top and Left negative, and Height and Width larger than UserForm), or doing the same within Frame control, which SpecialEffect set to 0 and empty Caption.

like image 66
omegastripes Avatar answered Jan 15 '23 14:01

omegastripes