GTK3: Resize Image while retaining aspect-ratio

Question

When I'm resizing the GtkWindow, i want the GtkImage to resize as well while keeping the same aspect ratio as before. I can't find any good examples on how to set this up with GTK3

This is what i've tried so far:

#include <gtk/gtk.h>
#include <gdk-pixbuf/gdk-pixbuf.h>

GtkAllocation *allocation = g_new0 (GtkAllocation, 1); 

gboolean resize_image(GtkWidget *widget, GdkEvent *event, GtkWidget *window) {
    GdkPixbuf *pixbuf = gtk_image_get_pixbuf(GTK_IMAGE(widget));
    if (pixbuf == NULL) {
        g_printerr("Failed to resize image\n");
        return 1;
    }
    gtk_widget_get_allocation(GTK_WIDGET(widget), allocation);
    pixbuf = gdk_pixbuf_scale_simple(pixbuf, widget->allocation.width, widget->allocation.height, GDK_INTERP_BILINEAR);
    gtk_image_set_from_pixbuf(GTK_IMAGE(widget), pixbuf);
    return FALSE;
}

int main(int argc, char **argv) {
    GtkWidget *window = NULL;
    GtkWidget *image = NULL;
    gtk_init(&argc, &argv);
    window = gtk_window_new(GTK_WINDOW_TOPLEVEL);
    image = gtk_image_new_from_file("image.jpg");
    g_signal_connect(window, "destroy", G_CALLBACK(gtk_main_quit), NULL);
    g_signal_connect(image, "draw", G_CALLBACK(resize_image), (gpointer)window);
    gtk_container_add(GTK_CONTAINER(window), image);
    gtk_widget_show_all(GTK_WIDGET(window));
    gtk_main();
    return 0;
}

This code should just resize the Pixbuf to the size of the parent, but it doesn't work, i get these errors:

GdkPixbuf-CRITICAL **: gdk_pixbuf_get_width: assertion 'GDK_IS_PIXBUF (pixbuf)' failed

GLib-GObject-CRITICAL **: g_object_unref: assertion 'G_IS_OBJECT (object)' failed

Even if this code would work, i wouldn't be able to keep the same aspect ratio, how to achieve this?

Thanks in Advance

José Fonte José Fonte · Accepted Answer · 2018-05-16T18:53:41

Well, a trick to do this is using a GtkLayout between the image and the window. Also, instead of using the draw signal, use the size-allocate signal.

We will load a GdkPixbuf and use it as reference for scaling, otherwise the quality would deteriorate with cumulative 'resizing'.

A simple approach would be:

#include <gtk/gtk.h>
#include <gdk-pixbuf/gdk-pixbuf.h>

struct _resize_widgets {
   GtkWidget *image;
   GdkPixbuf *pixbuf;
};

typedef struct _resize_widgets ResizeWidgets;

gboolean resize_image(GtkWidget *widget, GdkRectangle *allocation, gpointer user_data) {
   int x,y,w,h;
   GdkPixbuf *pxbscaled;
   GtkWidget *image = (GtkWidget *) ((ResizeWidgets *) user_data)->image; 
   GdkPixbuf *pixbuf= (GdkPixbuf *) ((ResizeWidgets *) user_data)->pixbuf; 

   x = 0;
   y = 0;

   h = allocation->height;
   w = (gdk_pixbuf_get_width(pixbuf) * h) / gdk_pixbuf_get_height(pixbuf);

   pxbscaled = gdk_pixbuf_scale_simple(pixbuf, w, h, GDK_INTERP_BILINEAR);

   if (w < allocation->width) {
      x = (allocation->width - w) / 2;
      gtk_layout_move(GTK_LAYOUT(widget), image, x, y);
   }

   gtk_image_set_from_pixbuf(GTK_IMAGE(image), pxbscaled);

   g_object_unref (pxbscaled);

   return FALSE;
}

int main(int argc, char **argv) {
   GtkWidget *window = NULL;
   GtkWidget *image = NULL;
   GtkWidget *container = NULL;
   GdkPixbuf *pixbuf = NULL;
   ResizeWidgets *widgets;

   gtk_init(&argc, &argv);

   window = gtk_window_new(GTK_WINDOW_TOPLEVEL);
   container = gtk_layout_new(NULL, NULL);
   image = gtk_image_new();

   pixbuf = gdk_pixbuf_new_from_file ("image.png", NULL);
   if (pixbuf == NULL) {
      g_printerr("Failed to resize image\n");
      return 1;
   }

   widgets = g_new0(ResizeWidgets, 1);
   widgets->image = image;
   widgets->pixbuf = pixbuf;

   gtk_container_add(GTK_CONTAINER(window), container);
   gtk_layout_put(GTK_LAYOUT(container), image, 0, 0);

   gtk_widget_set_size_request (GTK_WIDGET(window), 20, 20);

   g_signal_connect(window, "destroy", G_CALLBACK(gtk_main_quit), NULL);
   g_signal_connect(container, "size-allocate", G_CALLBACK(resize_image), widgets);

   gtk_widget_show_all(GTK_WIDGET(window));

   gtk_main();

   g_object_unref (pixbuf);
   g_free(widgets);

   return 0;
}

Compile with gcc -o main main.cpkg-config --cflags --libs gtk+-3.0`

This will keep aspect ratio. If that is not desired, then the resize_image callback handler would be:

gboolean resize_image(GtkWidget *widget, GdkRectangle *allocation, gpointer user_data) {
   int x,y,w,h;
   GdkPixbuf *pxbscaled;
   GtkWidget *image = (GtkWidget *) ((ResizeWidgets *) user_data)->image; 
   GdkPixbuf *pixbuf= (GdkPixbuf *) ((ResizeWidgets *) user_data)->pixbuf; 

   pxbscaled = gdk_pixbuf_scale_simple(pixbuf, allocation->width, allocation->height, GDK_INTERP_BILINEAR);

   gtk_image_set_from_pixbuf(GTK_IMAGE(image), pxbscaled);

   g_object_unref (pxbscaled);

   return FALSE;
}

This is a simple hack, there are other options obviously, like cairo for drawing or simply checking Eye of Gnome (eog) implementation which is much more complete.

GTK3: Resize Image while retaining aspect-ratio

1 Answers