Merge pull request ipython#1832 from ellisonbg/imageresize

Make svg, jpeg and png images resizable in notebook.
mattvonrocketstein · Jun 8, 2012 · c86581f · c86581f
2 parents 8ff48b7 + b81a045
commit c86581f
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 2 deletions.
diff --git a/IPython/frontend/html/notebook/static/js/outputarea.js b/IPython/frontend/html/notebook/static/js/outputarea.js
@@ -282,14 +282,22 @@ var IPython = (function (IPython) {
 
     OutputArea.prototype.append_png = function (png, element) {
         var toinsert = $("<div/>").addClass("box-flex1 output_subarea output_png");
-        toinsert.append($("<img/>").attr('src','data:image/png;base64,'+png));
+        var img = $("<img/>").attr('src','data:image/png;base64,'+png);
+        img.load(function () {
+            $(this).resizable({'aspectRatio': true, 'autoHide': true})
+        });
+        toinsert.append(img);
         element.append(toinsert);
     };
 
 
     OutputArea.prototype.append_jpeg = function (jpeg, element) {
         var toinsert = $("<div/>").addClass("box-flex1 output_subarea output_jpeg");
-        toinsert.append($("<img/>").attr('src','data:image/jpeg;base64,'+jpeg));
+        var img = $("<img/>").attr('src','data:image/jpeg;base64,'+jpeg);
+        img.load(function () {
+            $(this).resizable({'aspectRatio': true, 'autoHide': true})
+        });
+        toinsert.append(img);
         element.append(toinsert);
     };
 

diff --git a/IPython/frontend/html/notebook/static/js/utils.js b/IPython/frontend/html/notebook/static/js/utils.js
@@ -126,12 +126,24 @@ IPython.utils = (function (IPython) {
                 DOWN     : 40,
     };
 
+
+    points_to_pixels = function (points) {
+        // A reasonably good way of converting between points and pixels.
+        var test = $('<div style="display: none; width: 10000pt; padding:0; border:0;"></div>');
+        $(body).append(test);
+        var pixel_per_point = test.width()/10000;
+        test.remove();
+        return Math.floor(points*pixel_per_point);
+    }
+
+
     return {
         uuid : uuid,
         fixConsole : fixConsole,
         keycodes : keycodes,
         grow : grow,
         fixCarriageReturn : fixCarriageReturn
+        points_to_pixels : points_to_pixels
     };
 
 }(IPython));