I've seen a ton of examples how to save an image based on saving a screenshot.
This has a fundamental flaw. The take screenshot only takes whats visable on the page at the time. So if I have an image at the bottom of the page, and I want to save it based on the location of the elements that I found, either one or two problems occur.
If I save the screenshot and then try to save by the location, the screen shot ends at point 1200 but the image is located at 3000. If i focus on the image and then take a screen shot, the image is is now on the screen shot, however, the location doesn't work. It doesn't work because I still have a 1200px height image with a location of 3000.
How can I simply say, I have an image at 3000x 3014y and I just want to save it?
You can basically get base64 string of the image and save it to file.
var base64string = driver.ExecuteScript(#"
var c = document.createElement('canvas');
var ctx = c.getContext('2d');
var img = document.getElementsByTagName('img')[0];
c.height=img.height;
c.width=img.width;
ctx.drawImage(img, 0, 0,img.width, img.height);
var base64String = c.toDataURL();
return base64String;
") as string;
var base64 = base64string.Split(',').Last();
using (var stream = new MemoryStream(Convert.FromBase64String(base64)))
{
using (var bitmap = new Bitmap(stream))
{
var filepath = Path.Combine(AppDomain.CurrentDomain.BaseDirectory, $"{Guid.NewGuid()}.jpg");
bitmap.Save(filepath, ImageFormat.Jpeg);
}
}
I've resolved it. Chrome vs IE vs Firefox take screen shots in different manners. Firefox will stitch the screenshot together, chrome only takes whats visible and IE will shrink everything to try to fit on one page.
If you need to do a screenshot of something that is not on the base page i'd suggest firefox
Related
I'm using ChromiumWebBrowser to convert a local html page that might have images in it to PDF in order to print it on a kiosk printer. The dimensions of the PDF should be 80mm x 200mm. The following is the code so far:
using (var browser = new ChromiumWebBrowser(url, browserSettings))
{
if (zoomLevel > 0)
{
browser.FrameLoadStart += (s, argsi) =>
{
var b = (ChromiumWebBrowser)s;
if (argsi.Frame.IsMain)
{
b.SetZoomLevel(zoomLevel);
}
};
}
await browser.WaitForInitialLoadAsync();
var contentSize = await browser.GetContentSizeAsync();
var viewport = new Viewport
{
Height = contentSize.Height,
Width = contentSize.Width,
Scale = 1.0
};
var printSettings = new PdfPrintSettings();
printSettings.PageWidth = 80000; // 80mm
printSettings.PageHeight = 200000; // 200mm
printSettings.BackgroundsEnabled = true;
await browser.PrintToPdfAsync("D:\\chromium_pdf.pdf", printSettings);
}
The html page is converted perfectly if it only contains text. Also, if it has images that fit within the specified print width and height, it converts fine. The issue occurs when large images are included in the html. This results in part of the image being cropped out from the right.
When printing to PDF manually in a normal browser, the popup that shows up has a tick box for "fit to printable area" that scales the entire page down to fit the whole image. I would like to simulate that through code.
In the PdfPrintSettings class, there is a property called ScaleFactor. When I change this from 100% to 50%, the image fits fine in the created PDF page. However, that 50% value is arbitrary and I would like to scale it based on the image.
I tried changing the viewport width and height or the browser zoom level but that does not affect the printed PDF.
I also don't want to take a screenshot of the PDF since that affects the print quality; printing text is much clearer.
How can I scale the page to fit into the PDF page using this ChromiumWebBrowser from CefSharp? Or how can I figure out what the ScaleFactor should be?
Here is a screenshot of the first and second pages of the PDF generated:
PrintToPdfAsync uses the same code path as https://chromedevtools.github.io/devtools-protocol/tot/Page/#method-printToPDF
There is no specific support for fit to page. Until chromium adds support there won't be a built in option.
Possibly options to look at:
Add some css media print rules
Calculate scale based on content size.
CameraCaptureUI captureUI = new CameraCaptureUI();
captureUI.PhotoSettings.Format = CameraCaptureUIPhotoFormat.Jpeg;
captureUI.PhotoSettings.MaxResolution = Windows.Media.Capture.CameraCaptureUIMaxPhotoResolution.HighestAvailable;
StorageFile file = await captureUI.CaptureFileAsync(CameraCaptureUIMode.Photo);
This shows up the camera, and I am able to preview and click to capture the image. The captured image is shown in another window over the original camera image windows. I am able to crop and click to save this captured image.
However, right after I click save, the image is getting stretched, and after it is saved, it remains stretched as well. In essence, the image I capture and save is being stretched,
I tried removing the crop and it works fine, but I need the crop feature as well.
What am I doing wrong? Should I be using any other values for these settings?
This was working fine till December if I remember correctly.
Any help here is appreciated. Screenshots added below
, ,
This is for developing a Windows 10 application.
I am trying to capture an image using the camera, edit the captured image,
CameraCaptureUI captureUI = new CameraCaptureUI();
captureUI.PhotoSettings.Format = CameraCaptureUIPhotoFormat.Jpeg;
captureUI.PhotoSettings.AllowCropping = true;
captureUI.PhotoSettings.CroppedAspectRatio = new Windows.Foundation.Size(4, 3);
//captureUI.PhotoSettings.CroppedSizeInPixels = new Windows.Foundation.Size(0,0);
captureUI.PhotoSettings.MaxResolution = Windows.Media.Capture.CameraCaptureUIMaxPhotoResolution.HighestAvailable;
StorageFile file = await captureUI.CaptureFileAsync(CameraCaptureUIMode.Photo);
This shows up the camera, and I am able to preview and click to capture the image. The captured image is shown in another window over the original camera image windows. I am able to crop and click to save this captured image.
However, right after I click save, the image is getting stretched, and after it is saved, it remains stretched as well. In essence, the image I capture and save is being stretched,
I tried changing the CroppedSizeInPixels with size from (0,0) to (200,200). And also various CroppedAspectRatios.
What am I doing wrong? Should I be using any other values for these settings?
Any help here is appreciated.
I'm currently using Selenium WebDriver 2.35 and hit a roadblock when it comes to taking a screenshot. I wrote up a small function that takes in an IWebElement and will return a screenshot of the specific element. The element I am trying to screenshot is actually an image pulled from a sprite. This element is tricky though, because upon mouseover/hover the image changes from gray to its true color(by moving to a different part of sprite). I am able to get a proper screenshot of the image via this function, but cannot get it to recognize the mouse interactions with ITakesScreenshot. I can visually see in the browser that the image is hovered over, but the screenshot cannot. Any thoughts?
public static Bitmap GetImage(IWebElement element)
{
RemoteWebDriver driver = BrowserManager.GetInstance().GetDriver();
Actions action = new Actions(driver);
//take screenshot of page
action.MoveToElement(element).Build().Perform();
Byte[] ba= ((ITakesScreenshot)driver).GetScreenshot().AsByteArray;
Bitmap ss = new Bitmap(new MemoryStream(ba));
//ss.Save("c:\\tmp\\ss.png", ImageFormat.Png);
Rectangle crop = new Rectangle(element.Location.X, element.Location.Y, element.Size.Width, element.Size.Height);
//create a new image by cropping the original screenshot
Bitmap image = ss.Clone(crop, ss.PixelFormat);
return image;
}
In my experience, with automations that route through Selenium Grid, no mouse is seen. Perhaps this is because the "mouse" is actually a virtual Selenium mouse and unconnected to the systems native mouse driver.
It seems as though the newest selenium (2.39) has addressed this issue and I am able to see mouse hover in this screenshot method. Thanks everyone for your help!
I did some searching to try and generate jpg files from an html page and found one solution called IECapt or something similar that requires IE on the server to work...not what I want.
Here's what I'm looking to do: Generate a jpg image from an html page (the html page will just be text) and then put a watermark over the jpg.
Essentially, I'm creating a "sample" that my users can see which will just be an image created from html (again just straight text). That sample should have a watermark on it as mentioned above. Are there any libraries available to do this with c#? What I'd like is to pass in the url of my page that I want converted to a method and maybe the save path of the jpg, then have it work its magic, and convert that url to a jpg image, toss a watermark on it, then say hooray!
Edit 1
adding some code from the answer below..can't get my head around this:
InitialContainer c = new InitialContainer("<html><body><div align=\"center\">This is my html, does it work here?</div></body></html>");
Bitmap m_Bitmap = new Bitmap(400, 700);
c.Paint(Graphics.FromImage(m_Bitmap));
m_Bitmap.Save(#"C:\test\Test.bmp");
Edit 2
this DOES work.
Bitmap m_Bitmap = new Bitmap(400, 600);
PointF point = new PointF(0,0);
HtmlRenderer.Render(Graphics.FromImage(m_Bitmap), "<html><body><div align=\"center\">This is my html, does it work here?</div></body></html>",point, 500);
m_Bitmap.Save(#"C:\test\Test.bmp");
You can use this HtmlRenderer class.
I haven't tried this, but you can try using Control.DrawToBitmap().
To draw the watermark you can go like this:
Image img; //the html image.
Image watermark; //the watermark image.
Point location; //where to draw the watermark on the html image.
Graphics g = Graphics.FromImage(img);
g.DrawImage(watermark, location);