No Matches
Display an image using NanoVG

Prev Tutorial: Display an image using direct framebuffer access
Next Tutorial: Render vector graphics

Original author Amir Hassan (kallaballa) amir@.nosp@m.viel.nosp@m.-zu.o.nosp@m.rg
Compatibility OpenCV >= 4.7

Using NanoVG to display images

Instead of feeding to the video pipeline or doing a direct framebuffer access we can use NanoVG to display an image. It is not as convinient as the other methods but it is very fast and flexible.

Display an Image through NanoVG
using namespace cv;
using namespace cv::v4d;
class DisplayImageNVG : public Plan {
//A simple struct to hold our image variables
struct Image_t {
std::string filename_;
nvg::Paint paint_;
int w_;
int h_;
} image_;
void setup(Ptr<V4D> win) override{
//Set the filename
#ifdef __EMSCRIPTEN__
image_.filename_ = "doc/lena.png";
image_.filename_ = samples::findFile("lena.jpg");
//Creates a NanoVG context. The wrapped C-functions of NanoVG are available in the namespace cv::v4d::nvg;
win->nvg([](Image_t& img) {
using namespace cv::v4d::nvg;
//Create the image_ and receive a handle.
int handle = createImage(img.filename_.c_str(), NVG_IMAGE_NEAREST);
//Make sure it was created successfully
CV_Assert(handle > 0);
//Query the image_ size
imageSize(handle, &img.w_, &img.h_);
//Create a simple image_ pattern with the image dimensions
img.paint_ = imagePattern(0, 0, img.w_, img.h_, 0.0f/180.0f*NVG_PI, handle, 1.0);
}, image_);
void infer(Ptr<V4D> win) override{
//Creates a NanoVG context to draw the loaded image_ over again to the screen.
win->nvg([](const Image_t& img, const cv::Size& sz) {
using namespace cv::v4d::nvg;
//Scale all further calls to window size
scale(double(sz.width)/img.w_, double(sz.height)/img.h_);
//Create a rounded rectangle with the images dimensions.
//Note that actually this rectangle will have the size of the window
//because of the previous scale call.
roundedRect(0,0, img.w_, img.h_, 50);
//Fill the rounded rectangle with our picture
}, image_, win->fbSize());
int main() {
cv::Ptr<V4D> window = V4D::make(960, 960, "Display an Image using NanoVG", ALL, false, true);
Template class for specifying the size of an image or rectangle.
Definition: types.hpp:335
_Tp height
the height
Definition: types.hpp:363
_Tp width
the width
Definition: types.hpp:362
Definition: v4d.hpp:68
std::shared_ptr< _Tp > Ptr
Definition: cvstd_wrapper.hpp:23
#define CV_Assert(expr)
Checks a condition at runtime and throws exception if it fails.
Definition: base.hpp:342
Net::Result infer(cv::GOpaque< cv::Rect > roi, T in)
Calculates response for the specified network (template parameter) for the specified region in the so...
Definition: infer.hpp:474
void scale(cv::Mat &mat, const cv::Mat &range, const T min, const T max)
Definition: quality_utils.hpp:90
Definition: nvg.hpp:20
void roundedRect(float x, float y, float w, float h, float r)
void beginPath()
void fillPaint(Paint paint)
Definition: backend.hpp:15
"black box" representation of the file storage associated with a file on disk.
Definition: core.hpp:106
Definition: nvg.hpp:36