How to make a Form of Winforms and pictureBox control display png images transparency without the outline? - c#

I have an application using png type and GIF with transparency in the background. So I want to display them in Winforms using PictureBox, but they still have the outline or something outside the images that seem unclear as photoshop does. I have attached the example below.
As you guys can see the image has something outside that looks so annoying, can you guys help me figure out how to fix or improve It? I appreciate that.
Below is the original png that I used in my project
enter image description here

The problem is that the image is not fully transparent where you think it is.
The problem when taking an image and removing the background with transparency is that you often use the magic wand and it works for 99% but the rest you have to fix manually.
What I personally prefer in these cases is that you take your image (the png version with transparency) then in Photoshop you add another layer and put the first layer with the image on top. Then you change background color on the second layer (the one you just created) with a strange color in regards to the image, so in this case i would test with yellow.
Then if you have everything correct you should not see your image and since part of it is transparent you will see the yellow color where the image is transparent. Now you can zoom in and check the "strange parts" of the image and then you will find the spots that are not transparent. Now you can use the eraser or magic wand and polish the edges so that you only see yellow where it should be transparent. When you are done you could test and change the yellow color on the second layer to red and just double check. Then it will probably work as a charm. Good luck! If it does not work after that, please give us more details and also add the png image.

Related

C# proper image alpha layer when form is invisible

I'm looking for a way to have images on invisible form that allow alpha transparency and allow to place and use buttons/labels etc.
I've tried this Transparent background on winforms?, layered window and many more, nothing fully successful. I've ended up with such failures http://imgur.com/a/t6nmF
Transparency key only makes one color transparent, which doesn't work on images that have smooth color gradients on the edges.
First of all, are you certain that your image has a transparent background?
Layered window is exactly what you should use to achieve the desired effect. Since you don't give much details, I don't know what's wrong with your implementation. Try to use the PerPixelAlphaForm from the following article: Per Pixel Alpha Blend in C#. When used correctly, it will work (even though the article is really old).

Words in transparent PNG have jagged edges

I've built an app which uses transparent PNGs to display an overlay for users to tap using WPF and C#. However, there are weird jagged edges around the words. Would this be more of a C#/WPF limitation or a Photoshop issue?
Screen resolution is 720p. App runs on win7pro.
Screenshot:
Definitely a problem with the image itself. I see the same fringing when viewing the image against a black background on my phone. Make sure you compose the text over a transparent background (i.e., don't remove the background with a magic wand tool) and save with a full alpha channel (32-bit PNG).

WinForm transparent image issue

I have a WinForm and I set a transparent PNG image for the label. In Windows XP, the transparency displays properly, but in Windows 7, the white text (as seen in the example URL below) becomes transparent (it should be solid white). I'm also wondering if there is a way to smooth the edges of the transparent image so it isn't as choppy.
label1.Image = global::WinProgram.Properties.Resources.image_name;
Example:
Due to your limited code, I'd be guessing on this one but i find this very likely to be your problem. In WinForms there is a so called TransparencyKey, I'm guessing that you sett'd the SolidWhite as your TransparencyKey.
You can refer to this post: Transparent Background

Cant get drop shadow as per PNG image in C# background image of form

I've form in .net C#,
Problem:
I've a PNG image with drop shadow and I want put that image as back ground image of form and also using transparency key as well with the same background color property. But when I debug my app it does not give expected drop shadow as per png image. Please help me.
You'll probably need to programmatically adjust the transparency of the image.
Background images on a form do not support any photo attributes/editing, just set or get. So you'll need to get your photo and the background color of the form, and then programmatically change the photo to look as if it is transparent to the background color of the image.
Then take the image and set it as the background image of the form.
But without more information, I'm not sure what else to say or if I've said the right thing.
I have a better solution.
ModernUI Theme for .Net WinForms supports two kinds of Shadow Effects. See
image below.
WinForm ModernUI
It's under MIT on GitHub:
https://github.com/NetDimension/WinForm-ModernUI

Overlay image with PNG as mask using .Net and Javascript

I have a project I am working on where the user can upload a frame image in PNG format. After they upload the frame they can upload a photo that will be placed behind the frame. The photo can be resized and moved so they can fit their photo into the frame. Once they are happy with their work, they can save their work.
The canvas is a fixed size on the client. This is an ASP.Net MVC4 application and we are using JavaScript / JQuery. I have only worked a little with the System.Drawing library and not sure how this will all fit together, yet. If this can be done easily in using just .Net and JavaScript / JQuery that would be great, but I am not opposed to using a 3rd party .Net library alongside JavaScript / JQuery.
UPDATE
I am goign share the step the user will go through to Resize, Move, and crop the image.
Step 1: The user loads the frame by clicking on some UI and it opens a popup with a working area of 432px x 348px. The frame is a PNG with a transparent center and outer edge. On that window will be an area for the user to upload an image. As you can see in figure 1, the image is loaded at 100% and goes past the window. The user can choose to move the image around and crop or move onto step 2.
Step 2: The user will move the image around to find the handles so they can resize the image. They can chose to crop at this point without resizing, as well, or move onto step 3.
Step 3: The user will resize the image and move it into place. Once they are finished they will crop the uploaded image.
Step 4: This is the final result after the data is sent to the server to be processed.
It can be done in pure .NET. No other libraries have to be used.
In order to add image uploading feature to Your application, take a look at the answer here: Upload Photo To MVC 4 Applications.
If You make user upload the image with a frame in png format with transparency support, You should be able to just draw one image on another, like in a sample code here (a gif is used there): http://www.daniweb.com/web-development/aspnet/threads/112667/how-to-overlay-two-images-in-c.
You can also support frames in other formats (like jpg or bmp), however, in order to support this scenario, You should manually choose which pixels to draw on the original image. One of the easiests solutions would be to make one of the colors a transparency key, so when a pixel is in this color, it won't be drawn in the resulting image. You can choose bright pink or another color that is rarely used (or even allow a user to choose it). It's still not very complex, buy it requires a little bit more code, some additional work to make it fast and a treshold to detect similar pixels in case of bad quality frame images.
If You want some help with the code, let me know.

Categories