Base64 string returned from ExecuteScriptAsync decode error and shorter than the original string

[evolcano]

Description
I want to get image from web, so I call ExecuteScriptAsync to return the Base64 string encoded from image. The image data string changed in three steps:

(1)The original Base64 string is:
1 Original Base64 image data in WebView2.txt

(3)The string from ExecuteScriptAsync is:
2 Json from call ExecuteScriptAsync .txt

(3)The string after decode by JsonConvert.DeserializeObject().ToString() is:
3 Base64 after DeserializeObject of Json data from WebView2.txt

ERROR 1: The string return from ExecuteScriptAsync is too much shorter than the original one;
ERROR 2: The image from Convert.FromBase64String is totally BLACK

Version
SDK: Microsoft.NET.Sdk
Runtime: 1.0.1823.32
Framework: net6.0-windows
OS: win11

Repro Steps

1. Call ExecuteScriptAsync to get Base64 encoded image data started with "data:image/png;base64,";
2. Call JsonConvert.DeserializeObject().ToString() to get Base64 encoded image data;
3. Convert.FromBase64String to get image date of byte[] just use the Base64 substring after "data:image/png;base64,";
4. Create Image from MemoryStream of byte[];
5. Show Image on WinForm.

The jpg saved from Image which convented form Base64 string:

Additional context

[ElyssaJyu]

Hi @evolcano, I'm trying to reproduce your scenario. It will help for investigating if a sample project can be provided. Will sync the update later. Thanks

[evolcano]

Thanks @ElyssaJyu !

This is the demo project ,which has two file:

1. ImgHtml.html
   Click the image to see the original Base64 coded image data string:
   

2.frmGetImgFromWeb.cs
Run the project, and click button "GET", demo should automatically show Base64 image data string get from webview2, and the image convented fron Base64 string in the right-buttom corner. You could debug and see the height,width, and image type, but
the Image may be blank or black, and the Base64 string is different from the original one.

Suggestion:
1.Copy the Base64 string of html and WinForm to compare;
2.Change any image URL if it doesn't visible

ps: Demo code
WebView2Base64.zip

[ElyssaJyu]

Hi @evolcano,
I change the input in URL box from JPG source link to HTML file link. It works. The Base64 string of html and WinForms are the same; Image is shown as expected.

Base64 string textbox is shown as blank since the content is large, then the page is frozen. so I comment out the code.

//show decoded base64 image data
//txtScriptData.Text = ImgData;

Hope this will unblock your work. Could you give some details why you would like to get Base64 encoded image data, then convert Base64 string to create the image? Thanks

[evolcano]

Thank you @ElyssaJyu !
I repeated your operation ,change to local file is fine. But it still failed if change url to any on-line location.

In my scenario, I want to get the image data of any ON-LINE page which displayed in WebView embeded in WinForm, and do some process. The entire process should be silent and automatically, without any human-computer interaction. I could not find any other approch to do this, because DOM of web page is still cann't be accesse through WebView2.

Yes, I'm still blocked. Would you please do some test using on-line URL(not local file) and give me some feedback? Or give some alternative method to get the data of image direct form WebView2?

Thanks again.

ps:

1. Original Base64 image data string get directlly in web page(open ImgHtml.html and click image will show it)
   get in browser.txt

2.Base64 image data string get from WebView2
get from WebView2.txt

I have compared two string, only the beginning (iVBORw0KGgoAAAANSUhEUgAAA) and end (AAAABJRU5ErkJggg==) is the same , the middle part is totally different. I'm really confused.

[ElyssaJyu]

Hi @evolcano,

I have tried to replace from webView.Source = new Uri() to webView.CoreWebView2.Navigate(). Triger it second time, then the image can show as expected.

I would guess when the image data isn't complete in the first navigation, due to async task. The data I got will convert to a white blank image, when testing. You can check HTMLImageElement: loading property test whether the image is loaded.

After second navigation, the image shows, but the Base64 string is different comparing with that from web page. That might be because the image source directly from web page and the image source from html embedded in html are different.

Also please try AddWebResourceRequestedFilter method and raise WebResourceResponseReceived event to get webcontent data . Thanks.

[evolcano]

@ElyssaJyu , you are really awsome! Have a nice weekend.

Finally I got the image data according to your solution. Thanks a lot!

And I noticed after webView_NavigationCompleted trigged, the "complete" status of image is "True", but the image data is also bad.

It is still a mystery to me.

[ElyssaJyu]

Hi @evolcano, What does "bad" image data refer to?

[ElyssaJyu]

Closing as answered but feel free to reactivate if you have more questions. Thanks