Mimic webbrowser's Copy Image feature in my own context menu

[weekendrockstar]

Hello once again! I have searched in vain for a solution to this issue however, any threads that I've seen online were regarding copying a specific state of a dynamic image and were unresolved...or were more like what I was looking for and it was unresolved.

My current form uses a webbrowser control to display an image search of different sites (There are radio buttons for each site and you select the current one you want to search). Then I want the user to be able to easily copy the file to the clipboard for use immediately for my program in which the webbrowser is a part or, of course, in an actual image editor. This whole thing works like a charm however it is a bit of a pain as a user of the program to have a long context menu pop up when they right-click on the image that they desire to use. The sole use of the image as far as my program is to be copied therefore any other options are overkill and cause the potential for users to select another context menu option that is unwanted by them. I have set IsWebBrowserContextMenuEnabled to false so the original context menu is suppressed. I have created my own context menu with Copy Image as ToolStripMenuItem1. When I debug the program everything works including the right-click context menu having Copy Image as the only available option.

The problem lies with how I get the desired image into the clipboard. The best (perhaps only) tutorial I found online would successfully use x+y coordinates of where the mousepointer is and allow only the URL of the image to be put into the clipboard. But that does not work with what my program would later do with the image. I need the image itself which the user has their cursor over to be copied to the clipboard. Basically I want the broswer to do EXACTLY what it naturally does when you Copy an Image of a website that you are browsing but I cannot find anywhere online how it is naturally done within the webbrowser control.

I tried finding a way to remove all unneeded options from the context menu and leave only the Copy Image
option available but all research lead me to believe that this was not possible. That you must suppress the default context menu and create one. Which is fine, I just don't know how to get my new context to do perform a function that, by default, the control already does.

Any help, pointers, etc would be very much appreciated and I will see what I can do to give credit to those that can help me!

[weekendrockstar]

After another 9+ hours of research I was able to combine a few solutions I found online to do what I needed so I will share it here in case anyone stumbles upon this. I don't want there to be another 'unsolved' thread on the Internet regarding taking images from a webbrowser to a picturebox on the same form.

This uses a slightly altered version of the code found Here which was initially meant for copying links and images to the system clipboard from a webbrowser. I have limited it to just images.

You will need to change two properties of the WebBrowser control to suppress IE's default contextmenu so that you may use your own. Set IsWebBrowserContextMenuEnabled to false either through code or the properties box if using VBStudio. Create your own ContextMenu control. I create a ContextMenuItem called "Use Image" as that fits my application. Set the ContextMenu property of WebBrowser to the name of the contextmenu control you created. That is as in detail as I will get regarding this but there are far more tutorials and examples of how to do such things online.

You will need a PictureBox of course and lastly you will need to add a new WebClient control. If you're using VBStudio you can easily find how to add the WebClient to your toolbox online if you cannot find it yourself.

The WebClient will handle the image's transition from the WebBrowser control to the PictureBox.

You will need to import System.Net and System.IO

Place the following code inside your form's class but outside of any subs:

    Private WithEvents CurrentDocument As HtmlDocument
    Dim MousePoint As Point
    Dim Ele As HtmlElement

These need to be declared now for use later within some subroutines.

Now your script should tell your WebBrowser conrol to navigate somewhere after which the following code comes into play:

    Private Sub WebBrowser1_Navigated(sender As Object, e As WebBrowserNavigatedEventArgs) Handles WebBrowser1.Navigated
        CurrentDocument = WebBrowser1.Document
    End Sub

    Private Sub CurrentDocument_MouseMove(sender As Object, e As HtmlElementEventArgs) Handles CurrentDocument.MouseMove
        MousePoint = New Point(e.MousePosition.X, e.MousePosition.Y)
    End Sub

You should change the reference of WebBrowser1 to whatever you named your WebBrowser control of course.

The first sub sets the page to which you made your WebBrowser control navigate to as CurrentDocument which is used throughout the rest of the code. The second sub allows your app to keep track of where the user's mouse is located for upcoming use.

 Private Sub ContextMenuStrip1_Opening(sender As Object, e As System.ComponentModel.CancelEventArgs) Handles ContextMenuStrip1.Opening
        Ele = CurrentDocument.GetElementFromPoint(MousePoint)
        If Ele.TagName = "IMG" Then
            UseToolStripMenuItem.Visible = True
        Else
            UseToolStripMenuItem.Visible = False
        End If
    End Sub

Again, you should change the reference to your contextmenu's name if you didn't go with the default name as I did here. This sub will check the element tag of whatever is under your cursor. If your cursor is over an image and you right-click then it will make your contextmenu show which in my case brings up the Use Image option.

And finally:

    Private Sub UseToolStripMenuItem_Click(sender As Object, e As EventArgs) Handles UseToolStripMenuItem.Click
        Dim ToImg = Ele.GetAttribute("src")

        PictureBox1.Image = New System.Drawing.Bitmap(New IO.MemoryStream(New System.Net.WebClient().DownloadData(ToImg)))
        ToImg = Nothing

    End Sub

This, of course, fires when you click on the Use Image (or your named) context menu item. Now the image data from the image you had your cursor over is saved to the variable ToImg and then as you can see we are setting the Image location for the PictureBox to the data that the WebClient control is getting for us. If I am explaining that properly! But that is what happens.

You tell your application's WebBrowser control to navigate to a page with images. You find the image(s) that you like. Put your cursor over them and right-click. Now we don't have all of the default IE context menu options. There is only one and it does what you want. You click on your option in your contextmenu and voila...the image should appear in your PictureBox. Lastly I clear the value of the ToImg variable so that you can do this for multiple images on a page. Once in the PictureBox I have a button coded to automatically save the file as the appropriate file type, with the necessary name to the appropriate directory on the user's computer.

I hope this helps someone else. This is a fairly specifically used set of codes but perhaps this could help you in some way!

One caveat... This does not work with search engine image searches such as Google Image Search and the like...the way that they handle/display images isn't static enough. I tend to not even be able to get the contextmenu to fire if I navigated to such an image search page. However, I've seen discussions online about handling 'dynamic' images and perhaps they could lead you towards altering this code as is necessary for your purposes. But it is sufficient enough for me to minimize my usage to sites/pages with 'static' images. Rock on!