Grayscale Image cannot be output in the GUI Matlab

Hi guys, i got a problem here where i want to put my picture into the GUI , and then change the RGB image into grayscale image, but somehow the grayscale image keep getting error and i dont how to fix it. Help please.

Below is the coding that i had write,

[filename,filepath] = uigetfile({'*.*;*.jpg;*.png;*.bmp;*.oct'}, 'Select File to Open');

fullname = imread(strcat(filepath,filename));

app.Image.ImageSource = fullname;

grayImage = rgb2gray(fullname);

app.Image_2.ImageSource = grayImage;

The error that been pop-out is ,

Error using matlab.ui.control.Image/set.ImageSource (line 123)

You have specified an invalid CData.

Valid CData is m-by-n-by-3 truecolor image array.

Thank you in advance

[Dong Yi]

Do you have FB? I want to ask you a question.

I don’t know how to use this website

[Mohd Sukry Mohd Taib]

it is better to be ask here . in comment

Answer 1

[Cris LaPierre]

The function rgb2gray returns an mxn matrix. However, as you can see in the error message, the image component in an app requires an mxnx3 array.

In order to display a grayscale image created using rgb2gray, you will need to insert an axes, and plot to the axes using imshow or other suitable plotting function

cimg = imread('peppers.png');
gr=rgb2gray(cimg);

ax = axes;
imshow(gr,'Parent',ax);

●

.

[Mohd Sukry Mohd Taib]

Oh, I understand. Seems that the image need to be in mxn array if using the app right?

When using the axes it has not problem with it. Thank you!

After change into the Axes feature i manage to upload the pictures and change into the 2D images!

[Cris LaPierre]

You can use images in an app, but they have to be mxnx3, where the 3 is the rgb color values. A grayscale image is 2D, so it cannot be used in an image component. That is when you should use an axes instead.

[Image Analyst]

I'm not using app designer for other reasons until they improve it, but it looks like you're saying there is both an axes component, and an image component. And you're saying that the image component can only handle RGB images while the axes component can handle either RGB or gray scale. (Looks like yet another reason to avoid App Designer, but anyway...) I can see this as being a common source of confusion, and I'm sure Mohd was not the first and only person to have that confusion. Why don't they make the image component handle gray scale images? This seems like a major oversight that needs to be fixed in the next release.

[Cris LaPierre]

App Desiger now has most if not all the capabilites of Guide, with additional fetaures coming with each release. If you are going to create an app, there is no reason to avoid App Designer.

[Mohd Sukry Mohd Taib]

Thank you guys for the information . This is help alot in terms to understand more the GUI system :D

Answer 2

[Ali Ridha Ali]

I've faced the same issue, and I got a technical solution by doing a small trick.

You can show grayscale in app.Image component by re-building the grayscale image to be in a 3-channels matrix so that app.Image component can deal with it as an RGB image. This is my code:

GrayImg = rgb2gray(RGBImg);
GrayImg3 = cat(3, GrayImg, GrayImg, GrayImg);
app.Image.ImageSource = GrayImg3;

I tested it, and it works for me :)

I'm showing the trick here in case someone is facing the same problem.