0

Using the Code given at this link by mehmet mecek

I am attempting to Save the Image of Tag using Selenium VB.net 2019. My code for this action is

Dim ele = driver.FindElementByClassName("canvasWrapper")
Dim base64string = Trycast(driver.ExecuteScript("
                    var c = document.createElement('canvas');
                    var ctx = c.getContext('2d');
                    var img = document.getElementById('page1');
                    c.height=img.naturalHeight;
                    c.width=img.naturalWidth;
                    ctx.drawImage(img, 0, 0,img.naturalWidth, img.naturalHeight);
                    var base64String = c.toDataURL();
                    return base64String;
                    "), String)
MsgBox(base64string.ToString())

Dim base64 = base64string.Split(",").Last()

Dim stream = New MemoryStream(Convert.FromBase64String(base64))
Dim bmCaptured As Bitmap = New Bitmap(stream)
bmCaptured.Save(Path + "\" + pageNum.ToString + ".jpg", Imaging.ImageFormat.Jpeg)

I am getting error `The input is not a valid Base-64 string as it contains a non-base 64 character, more than two padding characters, or an illegal character among the padding characters. I have tried With and Without Trycast but am not able to save the canvas but some errors keep cropping up.

Raky
  • 625
  • 5
  • 19

1 Answers1

0

VB.Net Code - Got it... But trying for More Workarounds

Dim bmpScreen As Screenshot = driver.GetScreenshot()
Dim scrshot As String= bmpScreen.AsBase64EncodedString
Dim screenshotAsByteArray As Byte() = bmpScreen.AsByteArray
bmpScreen.SaveAsFile(Path + "\" + pageNum.ToString + ".jpg", 
   System.Drawing.Imaging.ImageFormat.Jpeg)

After this, we can load the image again and crop to element size.

Another and the Best Method code snippet I could search and develop is as follows and is working nicely

Dim fileName = pageNum.ToString + ".png"
Dim jsExeString As String = "var element = document.createElement('a');
                       element.setAttribute('href', 
                       document.getElementById('page1').toDataURL('image/png'));
                       element.setAttribute('download', '" + fileName + "');
                       element.style.display = 'none';
                       document.body.appendChild(element);
                       element.click();
                       document.body.removeChild(element);"
driver.ExecuteScript(jsExeString)

pagenum is basically a Counter used as File name for each saved image. Only drawback in this is that all files are downloaded to Default Download Folder.

Third Method, I could Use is

Dim ele = driver.FindElementById("mainContainer")
Dim stringForFile = "<!DOCTYPE html><html xmlns='http://www.w3.org/1999/xhtml'>
                         <head>
                         <meta charset='UTF-8'/>
                         <meta name='viewport' content='width=device-width; initial-scale=1.0; user-scalable=no'/>
                         <meta content='notranslate' name='google'/>
                         <meta http-equiv='X-UA-Compatible' content='IE=edge'/>
                         <link rel='stylesheet' href='.\viewer.css' type='text/css'>
                         <link rel='stylesheet' href='.\book.css' type='text/css'>
                         <link rel='stylesheet' href='.\stick.css' type='text/css'>
                         <link rel='stylesheet' href='.\template.css' type='text/css'>
                         <link rel='stylesheet' href='.\media-queries.css' type='text/css'>
                         <link rel='stylesheet' href='.\styles.css' type='text/css'>
                         <link rel='stylesheet' href='.\jquery-ui.css' type='text/css'>
                         <link rel='stylesheet' type='text/css' href='.\jquery.fancybox.css' media='screen' />
                         <script src='.\jspdf.js'></script>
                         <script src='.\from_html.js'></script>
                         <script src='.\split_text_to_size.js'></script>
                         <script src='.\standard_fonts_metrics.js'></script>
                         </head><body>" &
                  ele.GetAttribute("innerHTML") & 
                         "</body></html>"
    File.WriteAllText(Path + "\" + pageNum.ToString + ".htm", stringForFile)

All the .css and .js files can be copied to the Path (variable defining the the target folder) using statement like this 

FileCopy(My.Application.Info.DirectoryPath & "\css\viewer.css", Path & "\" & "viewer.css")
Raky
  • 625
  • 5
  • 19