Skip to content

Make svg, jpeg and png images resizable in notebook. #1832

Merged
merged 4 commits into from Jun 8, 2012
View
12 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);
};
View
12 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));
Something went wrong with that request. Please try again.