For loading and drawing an image, you need to declare the image object, load the image from a file, and add a drawing function call in the testApp::draw()
function. Perform the following steps:
ofImage
object:ofImage image;
The best way is to declare images in the testApp
class declaration in the testApp.h
file. For simplicity, sometimes we will declare them right on top of the testApp.cpp
file.
loadImage
function:image.loadImage( fileName );
Here, fileName
is a string value specifying the filename; for example, sunflower.png
. Normally, images should be located in the bin/data
folder of your application. If you want to use an image from another folder, it is possible to use absolute paths; for example, image.loadImage( "C:\myimage.png" )
in Windows.
image.draw( x, y )
function inside the testApp::draw()
function. Here, x
and y
are float values specifying the top-left corner of the image on the screen.Let's implement these steps in a project. It just draws a single image on the screen. The project is based on openFrameworks' emptyExample
example. Copy the folder with the example and rename it. Then place the image sunflower.png
into the bin/data
folder of the project. Now, replace the beginning of the testApp.cpp
file with the following code:
#include "testApp.h" ofImage image; //Declare image object void testApp::setup(){ //Load image file image.loadImage("sunflower.png"); } void testApp::update(){ } void testApp::draw(){ //Set up gray background ofBackground(128, 128, 128); //Draw image with top left corner x=100, y=50 pixels image.draw( 100, 50 ); }
Run the project; you will see the image shown in the following screenshot on the screen:
As you can see, we used an image in PNG file format. Besides, openFrameworks allows us to load and save images in JPG, BMP, and TIFF file formats. Among these, PNG is the most usable because it keeps the high quality of the original image, can maintain transparency, has small file size, and decodes very fast. JPG is good for smooth and realistic images such as photos. This format can reduce visible image quality, and does not work with transparency, but has smaller file size in case of real-life photos. BMP and TIFF store images in uncompressed form. They are good for holding and processing images without losing quality. They are rarely used in interactive applications because their file sizes are too large and image loading from such files is slow.
You can not only load images but also save them to PNG, JPG, BMP, or TIFF files. For such purposes, use the image.saveImage()
method. See the following example:
image.saveImage( "test.png" );
It is possible to move, scale, and stretch images on the screen using the overloaded version of the draw()
method: image.draw( x, y, w, h )
. It draws the image
object, additionally specifying the width w
and the height h
in pixels.
Also, there are overloaded versions of the image.draw()
method which allows us to simplify the code:
image.draw( p )
– draws image using point p
of type ofPoint
image.draw( rect )
– draws image using rectangle rect
of type ofRectangle
For retrieving the original image size in pixels, you can use its width and height fields, image.width
and image.height
, having type int
. The following are examples of using these:
0
, 0
):image.draw( 0, 0, image.width*0.5, image.height*0.5 );
300
pixels and proportional height:image.draw( 0, 0, 300, 300.0*image.height/image.width );
100
and height 200
:image.draw( 0, 0, 100, 200 );
image.draw( 0, image.height, image.width, -image.height);
Instead of writing big formulas inside the arguments of the image.draw( x, y, w, h )
method, you can use the ofTranslate( x, y )
and ofScale( scaleX, scaleY )
methods for translating and scaling the coordinate system, which is used for drawing everything on the screen. (See the Coordinate system transformations section in Chapter 2, Drawing in 2D for details.) You can call ofTranslate()
and ofScale()
in the required succession to obtain the desired transformations. If you are not very familiar with coordinate transformations, it will seem harder. But, trust me, it makes your code cleaner and easy to read and maintain. Also, see the next section for details.