How to download an image file from internet and display in UIAxes using MATLAB script in App Designer?

In this video it shows the steps to download an image file from the internet (https URL) and save it in the local PNG file.

In this video it uses sample images from the below webpage:

And below are the respective images’ URLs:

It uses WEBREAD command to read the data in a local MATLAB variable. Then it uses IMSHOW with parent set to UIAxes to display the image within the App window. It uses IMWRITE to save the image data in a local PNG file.

I hope you like this video. For any questions, suggestions or appreciation please contact us at: or email at:

Complete source code and other details:

Main Function:

    function ImageButtonPushed(app, event)

        data = webread(app.URLEditField.Value);


        imwrite(data, 'myImageFromInternet.png');


Complete App Designer code:

classdef DownloadFileFromInterntApp < matlab.apps.AppBase

    % Properties that correspond to app components
    properties (Access = public)
        UIFigure           matlab.ui.Figure
        URLEditField       matlab.ui.control.EditField
        URLEditFieldLabel  matlab.ui.control.Label
        ImageButton        matlab.ui.control.Button
        UIAxes             matlab.ui.control.UIAxes

    % Callbacks that handle component events
    methods (Access = private)

        % Button pushed function: ImageButton
        function ImageButtonPushed(app, event)
            data = webread(app.URLEditField.Value);
            imwrite(data, 'myImageFromInternet.png');

    % Component initialization
    methods (Access = private)

        % Create UIFigure and components
        function createComponents(app)

            % Create UIFigure and hide until all components are created
            app.UIFigure = uifigure('Visible', 'off');
            app.UIFigure.Position = [100 100 640 480];
            app.UIFigure.Name = 'MATLAB App';

            % Create UIAxes
            app.UIAxes = uiaxes(app.UIFigure);
            app.UIAxes.Position = [68 45 523 273];

            % Create ImageButton
            app.ImageButton = uibutton(app.UIFigure, 'push');
            app.ImageButton.ButtonPushedFcn = createCallbackFcn(app, @ImageButtonPushed, true);
            app.ImageButton.Position = [507 362 100 22];
            app.ImageButton.Text = 'Image';

            % Create URLEditFieldLabel
            app.URLEditFieldLabel = uilabel(app.UIFigure);
            app.URLEditFieldLabel.HorizontalAlignment = 'right';
            app.URLEditFieldLabel.Position = [50 362 30 22];
            app.URLEditFieldLabel.Text = {'URL'; ''};

            % Create URLEditField
            app.URLEditField = uieditfield(app.UIFigure, 'text');
            app.URLEditField.Position = [95 362 375 22];

            % Show the figure after all components are created
            app.UIFigure.Visible = 'on';

    % App creation and deletion
    methods (Access = public)

        % Construct app
        function app = DownloadFileFromInterntAp1

            % Create UIFigure and components

            % Register the app with App Designer
            registerApp(app, app.UIFigure)

            if nargout == 0
                clear app

        % Code that executes before app deletion
        function delete(app)

            % Delete UIFigure when app is deleted


Below are the sample image files which were created using the above code:

Leave a Reply