I'm using Steema TeeChart v4.1.2010.11303. I want to export a chart to a PNG image with a transparent background.
The resulting image has "distorted" or bold text in the left and bottom axis and in the header. It looks like being rendered with a raster font with a too low resolution. The legend on the right on the other hand looks fine:
The following sample code can be used to reproduce the problem:
TChart tChart = new TChart();
tChart.Aspect.View3D = false;
tChart.Panel.Brush.Gradient.Visible = false;
// Make the background of the chart transparent.
tChart.Panel.Transparent = true;
Steema.TeeChart.Styles.Bar series1 = new Steema.TeeChart.Styles.Bar( tChart.Chart );
series1.FillSampleValues();
tChart.Draw();
tChart.Graphics3D.BufferStyle = Steema.TeeChart.Drawing.BufferStyle.None;
using ( System.IO.Stream stream = new System.IO.MemoryStream() )
{
tChart.Export.Image.PNG.Width = m_PictureBox.Width;
tChart.Export.Image.PNG.Height = m_PictureBox.Height;
tChart.Export.Image.PNG.Save( stream );
// Show the bitmap in a Windows Forms PictureBox.
// Alternatively, it can also be saved in a file, which makes no difference.
PictureBox.Image = new Bitmap( stream );
}
When switching off the transparency with tChart.Panel.Transparent = false;, all text looks fine. However, I need a transparent background.
Is this a bug in TeeChart or am I missing something?
It is a know behavior for us and we haven't found a good solution for this problem, for the moment. If we will find a solution that we consider correct or we will arrive an interesting conclusion about problem of png export, we will inform you immediatly.
Thanks.
Best Regard,
Sandra Pazos
Related
I'm using the Svg.Core library (version 3.0.49.2) to render SVGs (defined in strings) to PNG images. No matter what I do, any shape seems to be rendered with a black stroke and a black fill.
Here's the code I'm using for a simple rectangle, as an example:
var svgString = #"<svg width=""300"" height=""300"" xmlns=""http://www.w3.org/2000/svg"" xmlns:xlink=""http://www.w3.org/1999/xlink""><rect x=""5"" y=""5"" height=""90"" width=""50"" fill=""#ef0000"" stroke=""#00ef00"" /></svg>";
var svgDocument = SvgDocument.FromSvg<SvgDocument>(svgString);
var bitmap = svgDocument.Draw();
bitmap.Save(fileName, ImageFormat.Png);
which ends up rendering a rectangle of the correct height and width, but all black:
I've seen a number of posts that mention various versions of inlining styles, but regardless of whether I'm using a style="" approach or a fill="", the problem continues. Also seems to happen without fill color specified or using standard color names instead of RGB values.
Any help or ideas are appreciated!
The best answer I have come up with here is from the comment earlier. If you put the following around it: svgDoc.Color = new SvgColourServer(Color.DarkGreen); svgDoc.StopColor = new SvgColourServer(Color.DarkGreen); svgDoc.Stroke = new SvgColourServer(Color.DarkGreen); svgDoc.Fill = new SvgColourServer(Color.DarkGreen); , you will get colors in the SVG. Posting this as the answer in case anyone runs into this issue down the road.
I am using ImageResizer from imageresizing.net and I am having a problem with transparency. When I resize png images, I am losing transparency and ending up with a black background.Here is my code, if anyone could help me it would be greatly appreciated.
var imagejob = new ImageJob();
imagejob.Instructions = new Instructions();
imagejob.Instructions.Width = 400;
imagejob.Instructions.Height = 300;
imagejob.Instructions.Mode = ImageResizer.FitMode.Max;
imagejob.Instructions.Format = "png";
imagejob.Instructions.OutputFormat = ImageResizer.OutputFormat.Png;
imagejob.Source = inStream;
imagejob.Dest = outStream;
ImageBuilder.Current.Build(imagejob);
FinalWidth = Convert.ToInt32(imagejob.FinalWidth);
FinalHeight = Convert.ToInt32(imagejob.FinalHeight);
BytesToSaveToDB = outStream.ToArray();
For anyone reading this, I have found the answer. The code i posted works fine and keeps transparency, I was using that code for resizing upon upload. I was actually then resizing the image again when displaying the image which i had not realised, and it was when displaying the image i was using the old code to resize which did not maintain transparency. So i was resizing twice and he old code was causing the issue, so the code i posted actually works fine.
I have to generate dynamic graphs on the fly, save it as a PNG image format (Transparent background) to be embedded on to a PDF.
The problem is, the graph will not be displayed on a control in the page (without a chart control in the WebForm) and should be generated from an underlying information and should be embedded while creating the PDF.
The libraries for the PDFs and PDF generation is all in place.
I would like to know how to generate a dynamic graph (Bar graph, Pie Graph) 3D or Simple graph without a chart control in place and be able to save it as an image with transparent background (.PNG).
The reason being, the PDF template has numerous layer shading, hence the background around the graph image should be transparent, something similar to the below image.
I have tried generating a dynamic bar graph similar to the example in the below link but the Image doesn't look promising
https://2leggedspider.wordpress.com/2004/11/21/generating-a-dynamic-bar-graph-using-aspnet-and-c/
Any help regarding the functionality is deeply appreciated. Thank you in advance.
Update: Wednesday 16th March 2016
With TaW's answer and updates I have been able to draw the required graph and below is the update with answer to the same question I asked
Add references to System.Windows.Forms and System.Windows.Forms.DataVisualization
Add below namespaces
using System.Drawing;
using System.Windows.Forms;
using System.Windows.Forms.DataVisualization.Charting;
And below method would give you the Pie Chart with smooth edges as shown in the picture
void Create3DPieChart()
{
/* Utilize the Chart class available in System.Windows.Forms.DataVisualization.Charting */
Chart chart = new Chart();
/* Add a chart area to the chart */
ChartArea CA = chart.ChartAreas.Add("A1");
/* Add data series to the chart and specify the type of Series */
Series S1 = chart.Series.Add("S1");
S1.ChartType = SeriesChartType.Pie;
/* Assign points for the Series */
S1.Points.AddXY(1, 17);
S1.Points.AddXY(2, 27);
S1.Points.AddXY(3, 7);
S1.Points.AddXY(4, 49);
/* Set chart color and other settings as required */
chart.BackColor = Color.Transparent;
CA.BackColor = chart.BackColor;
CA.Area3DStyle.Enable3D = true;
S1.Points[2]["Exploded"] = "true";
/*Assign AntiAliasing to Graphics style for smooth edges*/
chart.AntiAliasing = AntiAliasingStyles.Graphics;
/* Set the image path and save the image as PNG format*/
string imageNameAndPath = string.Concat(Application.StartupPath.Remove(Application.StartupPath.IndexOf("\\bin\\Debug")),
"/TempImages/Image", DateTime.Now.ToString("ddMMyyyyhhmmss") + ".png");
chart.SaveImage(imageNameAndPath, ChartImageFormat.Png);
}
TaW. Please correct me if I'm wrong.
Unfortunately the chart won't draw any transparency directly, so we need to workaround..
If you want to create a PNG with transparent background here is what you can do:
chart1.BackColor = Color.Fuchsia;
chart1.ChartAreas[0].BackColor = chart1.BackColor;
Bitmap bmp = new Bitmap( chart1.ClientSize.Width, chart1.ClientSize.Height);
chart1.AntiAliasing = AntiAliasingStyles.Graphics;
chart1.DrawToBitmap(bmp, chart1.ClientRectangle);
bmp.MakeTransparent(chart1.BackColor);
bmp.Save(yourFileName, ImageFormat.Png);
First we set some areas in the chart to a unique color; if you use fuchsia in your chart (yuck!), pick some other color.
Then we create a Bitmap to hold the image.
Now we turn anti-aliasing off for the text; this help to avoid funny colors when we turn the background pixels to tranparent.
Now we tell the chart control to draw itself into our bitmap.
Finally we make all pixels transparent that have our special color.
Now we can save to disk..
You may want to look into setting the dpi resolution and the chart size to make the result look nice in your pdf!
Update:
If you want to create the image without acutally showing a Chart control, there is no real problem, either. In fact you can even create a Chart image in a console application, if you include all necessary namespaces etc..
All you need to do is create the Chart in code and set up all necessary properties.
Here is a minimal example:
Chart chart = new Chart();
ChartArea CA = chart.ChartAreas.Add("A1");
Series S1 = chart.Series.Add("S1");
S1.ChartType = SeriesChartType.Pie;
S1.Points.AddXY(1, 17);
S1.Points.AddXY(2, 27);
S1.Points.AddXY(3, 7);
S1.Points.AddXY(4, 49);
chart.BackColor = Color.Fuchsia;
CA.BackColor = chart.BackColor;
CA.Area3DStyle.Enable3D = true;
S1.Points[2]["Exploded"] = "true";
Bitmap bmp = new Bitmap(chart.Width, chart.Height);
chart.AntiAliasing = AntiAliasingStyles.None;
chart.DrawToBitmap(bmp, chart.ClientRectangle);
bmp.MakeTransparent(chart.BackColor);
bmp.Save(yourFileName, ImageFormat.Png);
I got some weird issues when resizing an image with transparency in Magick.NET. I am using Q16-AnyCPU.
I am resizing a 100px image to 400px.
MagickImage image = new MagickImage("test.png");
image.Resize(400, 400);
image.Write("test_resized.png");
I have tried many combinations of image.FilterType and image.Interpolate without any good results.
Only when I use image.AdaptiveResize(400, 400);, it looks somewhat better, but not as expected. The final image I want to resize is much bigger and AdaptiveResize is very slow.
When I disable Alpha via image.Alpha(AlphaOption.Off); I looks quice nice, but I want to keep the alpha.
Source image (the white area is transparent):
What I get:
What I want:
I had to set VirtuaPixelMethod, thanks for the hint:
MagickImage image = new MagickImage("test.png");
image.VirtualPixelMethod = VirtualPixelMethod.Transparent;
image.Resize(400, 400);
image.Write("test_resized.png");
my Problem is, that when i put an image as the content of an MapOverlay on a Map,
the image starts to disappear if i zoom in close enough.
I created an image to illustrate the problem.
I recalculate the width and height of the image everytime i zoom, so it stays perfectly on the map. I checked it and the dimensions of the image are not the problem.
Does anybody can explain to me why this is happening?
Does anybody know how to fix this?
Thank you very much.
Unfortunately the windows SDK for HERE Maps has been deprecated and is no longer supported. It might be possible to achieve the requirement using the HERE JavaScript SDK 3.1 which supports better map overlays.
function addOverlayToMap(map) {
var imgCounter = 0;
// create an overlay that will use a weather map as a bitmap
var overlay = new H.map.Overlay(
new H.geo.Rect(
70.72849153520343, -24.085683364175395,
29.569664922291, 44.216452317817016
),
rainRadar[imgCounter],
{
// the bitmap is frequently updated mark the object as volatile
volatility: true
}
);
// update overlay's bitmap every 250 milliseconds
setInterval(function() {
imgCounter = imgCounter < 10 ? ++imgCounter : 0;
overlay.setBitmap(rainRadar[imgCounter]);
}, 250);
// add overlay to the map
map.addObject(overlay);
}
Reference : https://developer.here.com/documentation/examples/maps-js/geoshapes/image-overlay