Skia buggy color blending - skia

I'm using Skia m62 with Open GL backend and getting the glitch while rendering png file.
To create SkBitmap I'm using the following code:
const auto codec = SkCodec::MakeFromStream(SkStream::MakeFromFile("test.png"));
const SkImageInfo imageInfo = codec->getInfo().makeColorType(kN32_SkColorType);
SkBitmap bm;
bm.allocPixels(imageInfo);
codec->getPixels(imageInfo, bm.getPixels(), bm.rowBytes());
The rest of the code is slightly modified (cannot find gl/GrGLUtil.h header) example found in Skia sources: https://github.com/google/skia/blob/master/example/SkiaSDLExample.cpp
The library is built with arguments: skia_use_freetype=true skia_use_system_freetype2=false skia_use_libpng=true skia_use_system_libpng=false skia_use_expat=false skia_use_icu=false skia_use_libjpeg_turbo=false skia_use_libwebp=false skia_use_piex=false skia_use_sfntly=false skia_use_zlib=true skia_use_system_zlib=false is_official_build=true target_os="mac" target_cpu="x86_64"
Here is the FULL EXAMPLE on GitHub illustrating the issue. It contains the png under observation and full setup to run on Mac OS x86_64.
UPD: Filed a bug in Skia tracker: https://bugs.chromium.org/p/skia/issues/detail?id=7361

I'll quote the answer from Skia's bugtracker:
Skia's GPU backend doesn't support drawing unpremultiplied images, but that is the natural state of most encoded images, including all .pngs. What you're seeing is an unpremultiplied bitmap being drawn as if it were a premultiplied bitmap. Pretty isn't it?
There are a couple easy ways to fix this. The simplest way to adapt the code you have there is to make sure to ask SkCodec for premultiplied output, e.g.
const SkImageInfo imageInfo = codec->getInfo().makeColorType(kN32_SkColorType)
.makeAlphaType(kPremul_SkAlphaType);
Or, you can use this simpler way to decode and draw:
sk_sp img = SkImage::MakeFromEncoded(SkData::MakeFromFileName("test.png"));
...
canvas->drawImage(img, ...);
That way lets SkImage::MakeFromEncoded() make all the choices about format for you.
This solves the issue.

Related

Convert HTML To Image in .NET Core

Heading ##I want to convert HTML code to Image(png/jpg) on Web Server and then send image link in email in my .NET Core application. I don't want to purchase any third party library like NReco or EVo.
Is there any other way to convert HTML To Image in dotnet core 2.0?
I use net-core-html-to-image library that embeds wkhtmltoimage tool. The library is very simple to use. There is a nuget package:
Install-Package CoreHtmlToImage
If you want to convert HTML string to image:
var converter = new HtmlConverter();
var html = "<div><strong>Hello</strong> World!</div>";
var bytes = converter.FromHtmlString(html);
File.WriteAllBytes("image.jpg", bytes);
Or for URLs:
var converter = new HtmlConverter();
var bytes = converter.FromUrl("http://google.com");
File.WriteAllBytes("image.jpg", bytes);
I know this is old but I wanted to save some from headaches if you come across it. The wkhtmltopdf.exe file that this uses, uses an older rendering engine. I had to go all the way back to bootstrap v2 to make it render correctly.
There are number of free libraries on web to convert HTML to image/PDF/other formats.
I prefer TuesPechkin dll to export to image/pdf.
For image you need to use wkhtmltoimage dll. You can go through below links:
https://wkhtmltopdf.org/
Below is the Github link. You can find more details here:
https://github.com/tuespetre/TuesPechkin
Sharing you the solution, which might helps to others
I used wkhtmltopdf.exe and it worked.
Following post helped me
https://beeming.net/just-coding/2017/5/converting-html-to-pdf-using-c-and-magic

GraphicsMagick unable to process Unicode filenames

I have found that GraphicsMagick is unable to process my files named in Chinese. I did the same test on ImageMagick but IM worked as expected.
I thought this might be a bug so I filed a bug report here: https://sourceforge.net/p/graphicsmagick/bugs/384/
Anyway, this is how to reproduce my situation:
Platform: Win10
Version: GraphicsMagick 1.3.20
Code: gm -identify 獅藝學會.jpg
This is the returned text from Command Prompt:
>gm -identify 獅藝學會.jpg
gm identify: Unable to open file (????.jpg) [Invalid argument].
gm identify: Request did not return an image.
Using IM worked:
identify 獅藝學會.jpg
ç?.è-?å-,æoƒ.jpg JPEG 3264x2448 3264x2448+0+0 8-bit sRGB 2.691MB 0.016u 0:00.004
Although the text returned is scrambled, but converting the file to a .png still maintained the same filename apart from the different extensions of course.
What happened
I found this problem by using the gm node.js library batch processing my images, the source of the call is made from a UTF-8 webpage, so I assume the filename is passed as Unicode encoding.
I found no documentation related to this problem, although the documentation states that there was a -encoding option, it cannot be sent as parameter on Windows as it does not recognize it and I cannot find relevant solutions on Google.
Please help, is there any easy way around this problem, while keeping the exact filename?
In case someone uses the C api.
(You can only give (char *)-type filenames. And UTF-8 encoding does not work, if using GraphicsMagick on Windows.)
You could do the following:
Open the file for input (or output) yourself (use fopen(), _wfopen() etc).
Then set the filehandle within the ImageInfo structure for reading and Image structure for writing respectively (instead of setting the filename).
To have GraphicsMagick generate the right output file format, set magick within the Image structure.
f.e.:
//Reading
imageInfo->file=_wfopen(input_filename,L"rb"); //ImageInfo *imageInfo;
ReadImage(imageInfo,exception);
//Writing
image->file=_wfopen(output_filename,L"wb"); //Image *image;
strcpy(image->magick,"PNG");
WriteImage(imageInfo,image);
GraphicsMagick automatically closes the file after writing/reading.
I have the same problem using GM in C++. UTF-8 filenames are not supported under Windows (not even in the API!).
My workaround is to get the short path name (8.3), you can do that both using command line and Win32. However this doesn't work 100% - and if you want to save a file you have to create an empty one first to be able to get the short name.

Saving the stream using Intel RealSense

I'm new to Intel RealSense. I want to learn how to save the color and depth streams to bitmap. I'm using C++ as my language. I have learned that there is a function ToBitmap(), but it can be used for C#.
So I wanted to know is there any method or any function that will help me in saving the streams.
Thanks in advance.
I'm also working my way through this, It seems that the only option is to do it manually. We need to get ImageData from PXCImage. The actual data is stored in ImageData.planes but I still don't understand how it's organized.
https://software.intel.com/en-us/articles/dipping-into-the-intel-realsense-raw-data-stream?language=en Here you can find example of getting depth data.
But I still have no idea what is pitches and how data inside planes is organized.
Here: https://software.intel.com/en-us/forums/intel-perceptual-computing-sdk/topic/332718 kind of backwards process is described.
I would be glad if you will be able to get some insight from this information.
And I obviously would be glad if you've discovered some insight you can share :).
UPD: Here is something that looks like what we need, I haven't worked with it yet, but it sheds some light on internal organization of planes[0] https://software.intel.com/en-us/forums/intel-perceptual-computing-sdk/topic/514663
UPD2: To add some completeness to the answer:
You then can create GDI+ image from data in ImageData:
auto colorData = PXCImage::ImageData();
if (image->AcquireAccess(PXCImage::ACCESS_READ, PXCImage::PIXEL_FORMAT_RGB24, &colorData) >= PXC_STATUS_NO_ERROR) {
auto colorInfo = image->QueryInfo();
auto colorPitch = colorData.pitches[0] / sizeof(pxcBYTE);
Gdiplus::Bitmap tBitMap(colorInfo.width, colorInfo.height, colorPitch, PixelFormat24bppRGB, baseColorAddress);
}
And Bitmap is subclass of Image (https://msdn.microsoft.com/en-us/library/windows/desktop/ms534462(v=vs.85).aspx). You can save Image to file in different formats.

Transparency issue loading texture from PNG in Monogame

I'm trying to accomplish something that I figure should be quite simple in MonoGame GL on Windows.. That is to load a texture from a PNG file and render it to the screen as a sprite. So far I'm having a lot of trouble with this. I'm loading the PNG to a Texture2D with the following code (F#):
use file = System.IO.File.OpenRead("testTexture.png")
this.texture <- Texture2D.FromStream(this.GraphicsDevice, file)
and then rendering with:
this.spriteBatch.Begin(SpriteSortMode.Immediate, BlendState.NonPremultiplied);
this.spriteBatch.Draw(this.texture, Vector2.Zero, Color.White)
this.spriteBatch.End()
The problem is some kind of weird effect with the alpha channels, as if there's something up with channels not being alpha pre-multiplied or something, but I can't place for sure exactly what's happening. What's notable though is that the exact same code renders perfectly using the official XNA libraries. The issue is only in MonoGame, which I tested with version 3.0 and 3.2, both of which have the same issue.
Here's the rendering a test PNG in MonoGame to illustrate the problem:
The background in each image is cornflower blue, then pure red, green and blue respectively. Notice in the image with the red background, you can see a dark outline around the red lines in the texture. This outline shouldn't be there as the lines and the background are both pure red. Note the same thing occurs around the blue lines in the image with the blue background, but not in the image with the green background. In that image the green lines blend in with the green background as they should.
Below is how the exact same file renders using the official XNA library.
Notice how the blue, green and red lines blend in to the background when the background is the same colour. This is the correct behaviour.
Given that the same code behaves differently in both XNA and MonoGame, I believe there must be a bug in the framework. Would anyone have any good guess as to where the bug might be and of what nature? If it's an easy fix then the best solution might be to just fix that bug myself.
Besides that though I really just want to learn a way I can simply load a PNG and render it correctly to the screen in MonoGame. I'm sure I can't be the first one who's wanted to do this. I would like to avoid the content pipeline if at all possible, simply for the sake of simplicity.
Update
I've done some more digging trying to figure out the nature of this problem. I've changed the testTexture.png file to be more revealing about alpha blending problems. After using this new texture file, I took screenshots of the incorrect MonoGame rendering and viewed it in it's separate colour channels. What's happening is pretty perplexing to me. I initially though it might be a simple case of BlendState.NonPremultiplied being ignored, but what I'm seeing looks more complicated that that. Among other things, the green colour channel appears to be blending differently to the blue and red channels. Here's a rather large PNG image that's a compilation of screenshots and explanations as to what I'm talking about:
i.imgur.com/CEUQqm0.png
Clearly there's some kind of bug in MonoGame for Windows GL, and possibly other editions I haven't tried this with (though I'd be interested to see verified). If anyone thinks they know what might be happening here please let me know.
lastly, here's the project files to reproduce the problem I'm having:
mega.co.nz/#!llFxBbrb!OrpPIn4Tu2UaHHuoSPL03nqOtAJFK59cfxI5TDzLyYI
This issue has been resolved. The bug in the framework was found at:
MonoGame.Framework/Graphics/ImageEx.cs in the following method:
internal static void RGBToBGR(this Image bmp)
{
System.Drawing.Imaging.ImageAttributes ia = new System.Drawing.Imaging.ImageAttributes();
System.Drawing.Imaging.ColorMatrix cm = new System.Drawing.Imaging.ColorMatrix(rgbtobgr);
ia.SetColorMatrix(cm);
using (System.Drawing.Graphics g = System.Drawing.Graphics.FromImage(bmp))
{
g.DrawImage(bmp, new System.Drawing.Rectangle(0, 0, bmp.Width, bmp.Height), 0, 0, bmp.Width, bmp.Height, System.Drawing.GraphicsUnit.Pixel, ia);
}
}
changing it to this fixes the issue:
internal static void RGBToBGR(this Image bmp)
{
using (Bitmap bmpCopy = (Bitmap)bmp.Clone())
{
System.Drawing.Imaging.ImageAttributes ia = new System.Drawing.Imaging.ImageAttributes();
System.Drawing.Imaging.ColorMatrix cm = new System.Drawing.Imaging.ColorMatrix(rgbtobgr);
ia.SetColorMatrix(cm);
using (System.Drawing.Graphics g = System.Drawing.Graphics.FromImage(bmp))
{
g.Clear(Color.Transparent);
g.DrawImage(bmpCopy, new System.Drawing.Rectangle(0, 0, bmp.Width, bmp.Height), 0, 0, bmp.Width, bmp.Height, System.Drawing.GraphicsUnit.Pixel, ia);
}
}
}
What's happening is when the RGBToBGR conversion performed, it draws the converted version of the image on top of the image object it's converting from. This is what's causing the strange effects. As far as I can tell the only thing to do is to clear the image object before drawing over it again, which of course means the bitmap being converting from must be copied so you can read from the copied version while writing over the original version that was just cleared.
Thanks to dellis1972 for pointing me in the right direction on this: https://github.com/mono/MonoGame/issues/1946

TeeChart C# .Net Chart Transparency

I have downloaded the TeeChart for .Net 2012 Evaluation version.
I have worked for 2 days trying to get transparency to work on the pie chart, circular gauge, and line chart. Everything I try does not change the black color.
Here is some of the sample code I have used in my attempt to make it transparent.
pieChart.Series.Clear();
pieChart.Header.Visible = true;
pieChart.Header.Text = "Pie Chart"; //At top on the chart
pieChart.Aspect.View3D = false;
pieChart.Walls.Back.Transparent = true;
pieChart.Walls.Back.Gradient.Visible = false;
pieChart.Panel.Transparent = true;
pieChart.Panel.Gradient.Visible = true;
pieChart.Panel.Brush.Transparency = 50;
pie.Add(10,Color.Red);
pie.Add(15, Color.Green);
pie.Add(10, Color.PowderBlue);
pie.Add(15, Color.DarkGoldenrod);
pie.Add(10, Color.Bisque);
pie.Marks.Style = Steema.TeeChart.Styles.MarksStyles.Percent;
pieChart.Series.Add(pie);
The colors in the slices work as expected. I have tried changing the colors of Palettes, background color, canvas, and wall and nothing seems to work. I cannot find any documentation that give any explanation of what these objects are either to know if I am using each correctly. Please note that in each attempt only 1 was used as a time.
I am exporting the image to a PNG if that makes a difference - both to the stream and to a file. Is transparency a feature of the full version or something that can be done in the trial version? Please confirm as transparent charts are a requirement for our decision to buy this version.
Thanks
PS - It would be nice to also have access to the .Net documentation (The Java version, via the documentation, does not seem to be a direct comparison http://www.steema.com/files/public/teechart/java/v1/docs/JavaDoc/overview-summary.html)
I get a transparent chart using the code you posted in a WinForms application. They key is Panel.Transparent property. You can check that painting the form in a very visible color, eg.:
this.BackColor = Color.Red;
Exporting this chart to PNG also creates a transparent image for me. At run-time you need to set BufferStyle to BufferStyles.None before exporting, for example:
Steema.TeeChart.Drawing.BufferStyle buffer = chart1.Graphics3D.BufferStyle;
chart1.Graphics3D.BufferStyle = Steema.TeeChart.Drawing.BufferStyle.None;
chart1.Export.Image.PNG.Save(#"C:\temp\TransparentWebChart.png");
chart1.Graphics3D.BufferStyle = buffer;
Does this work fine for you? Which kind of application are you developing (WinForms, WebForms, WFP, Silverlight, WP7, etc.)?
Regarding the documentation, both evaluation and registered installerse include help file and tutorials shortcuts at the program group TeeChart entry and also in the Docs folder created by the installer.

Resources