From f02b5bef217d47a797960961cce5da2f2567928e Mon Sep 17 00:00:00 2001 From: MinRK Date: Thu, 23 Jan 2014 15:38:04 -0800 Subject: [PATCH 1/4] fix setting image height/width from metadata --- IPython/html/static/notebook/js/outputarea.js | 25 ++++++++----------- 1 file changed, 11 insertions(+), 14 deletions(-) diff --git a/IPython/html/static/notebook/js/outputarea.js b/IPython/html/static/notebook/js/outputarea.js index 7b194795c..9a1aed583 100644 --- a/IPython/html/static/notebook/js/outputarea.js +++ b/IPython/html/static/notebook/js/outputarea.js @@ -613,19 +613,21 @@ var IPython = (function (IPython) { }); }, 250); }; - - + + var set_width_height = function (img, md, mime) { + // set width and height of an img element from metadata + var height = _get_metadata_key(md, 'height', mime); + if (height !== undefined) img.setAttribute('height', height); + var width = _get_metadata_key(md, 'width', mime); + if (width !== undefined) img.setAttribute('width', width); + }; + OutputArea.prototype.append_png = function (png, md, element) { var type = 'image/png'; var toinsert = this.create_output_subarea(md, "output_png", type); var img = $(""); img[0].setAttribute('src','data:image/png;base64,'+png); - if (md['height']) { - img[0].setAttribute('height', md['height']); - } - if (md['width']) { - img[0].setAttribute('width', md['width']); - } + set_width_height(img[0], md, 'image/png'); this._dblclick_to_reset_size(img); toinsert.append(img); element.append(toinsert); @@ -636,12 +638,7 @@ var IPython = (function (IPython) { var type = 'image/jpeg'; var toinsert = this.create_output_subarea(md, "output_jpeg", type); var img = $("").attr('src','data:image/jpeg;base64,'+jpeg); - if (md['height']) { - img.attr('height', md['height']); - } - if (md['width']) { - img.attr('width', md['width']); - } + set_width_height(img[0], md, 'image/jpeg'); this._dblclick_to_reset_size(img); toinsert.append(img); element.append(toinsert); From 2cbb633cb4c4e340538c47e70818635d0345b71d Mon Sep 17 00:00:00 2001 From: MinRK Date: Thu, 23 Jan 2014 15:38:19 -0800 Subject: [PATCH 2/4] test displaying images with shape metadata --- .../casperjs/test_cases/display_image.js | 64 +++++++++++++++++++ 1 file changed, 64 insertions(+) create mode 100644 IPython/html/tests/casperjs/test_cases/display_image.js diff --git a/IPython/html/tests/casperjs/test_cases/display_image.js b/IPython/html/tests/casperjs/test_cases/display_image.js new file mode 100644 index 000000000..336d94efc --- /dev/null +++ b/IPython/html/tests/casperjs/test_cases/display_image.js @@ -0,0 +1,64 @@ +// +// Test display of images +// +// The effect of shape metadata is validated, +// using Image(retina=True) +// + + +// 2x2 black square in b64 jpeg and png +b64_image_data = { + "image/png" : "b'iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAIAAAD91JpzAAAAC0lEQVR4nGNgQAYAAA4AAamRc7EA\\nAAAASUVORK5CYII='", + "image/jpeg" : "b'/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAgGBgcGBQgHBwcJCQgKDBQNDAsLDBkSEw8UHRofHh0a\\nHBwgJC4nICIsIxwcKDcpLDAxNDQ0Hyc5PTgyPC4zNDL/2wBDAQkJCQwLDBgNDRgyIRwhMjIyMjIy\\nMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjL/wAARCAACAAIDASIA\\nAhEBAxEB/8QAHwAAAQUBAQEBAQEAAAAAAAAAAAECAwQFBgcICQoL/8QAtRAAAgEDAwIEAwUFBAQA\\nAAF9AQIDAAQRBRIhMUEGE1FhByJxFDKBkaEII0KxwRVS0fAkM2JyggkKFhcYGRolJicoKSo0NTY3\\nODk6Q0RFRkdISUpTVFVWV1hZWmNkZWZnaGlqc3R1dnd4eXqDhIWGh4iJipKTlJWWl5iZmqKjpKWm\\np6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uHi4+Tl5ufo6erx8vP09fb3+Pn6/8QAHwEA\\nAwEBAQEBAQEBAQAAAAAAAAECAwQFBgcICQoL/8QAtREAAgECBAQDBAcFBAQAAQJ3AAECAxEEBSEx\\nBhJBUQdhcRMiMoEIFEKRobHBCSMzUvAVYnLRChYkNOEl8RcYGRomJygpKjU2Nzg5OkNERUZHSElK\\nU1RVVldYWVpjZGVmZ2hpanN0dXZ3eHl6goOEhYaHiImKkpOUlZaXmJmaoqOkpaanqKmqsrO0tba3\\nuLm6wsPExcbHyMnK0tPU1dbX2Nna4uPk5ebn6Onq8vP09fb3+Pn6/9oADAMBAAIRAxEAPwD5/ooo\\noA//2Q=='" +} + + +casper.notebook_test(function () { + // this.printLog(); + this.test_img_shape = function(fmt, retina) { + this.thenEvaluate(function (b64data, retina) { + IPython.notebook.get_cell(0).clear_output(); + var cell = IPython.notebook.get_cell(0); + cell.set_text([ + "import base64", + "from IPython.display import display, Image", + "data = base64.decodestring(" + b64data + ")", + "retina = bool(" + retina + ")", + "display(Image(data, retina=retina))" + ].join("\n")); + cell.execute(); + }, {b64data : b64_image_data[fmt], retina : retina ? 1:0 }); + + this.wait_for_output(0); + + this.then(function() { + var img = this.evaluate(function() { + // get a summary of the image that was just displayed + var cell = IPython.notebook.get_cell(0); + var img = $(cell.output_area.element.find("img")[0]); + return { + src : img.attr("src"), + width : img.width(), + height : img.height(), + width_attr : img.attr("width"), + height_attr : img.attr("height") + }; + }); + var prefix = "Image('" + fmt + "', retina=" + retina + ") "; + this.test.assertNotEquals(img, null, prefix + "img was displayed"); + this.test.assertEquals(img.src.split(',')[0], "data:" + fmt + ";base64", + prefix + "data-uri prefix" + ); + var sz = retina ? 1 : 2; + var sz_attr = retina ? "1" : undefined; + this.test.assertEquals(img.height, sz, prefix + "measured height"); + this.test.assertEquals(img.width, sz, prefix + "measured width"); + this.test.assertEquals(img.height_attr, sz_attr, prefix + "height attr"); + this.test.assertEquals(img.width_attr, sz_attr, prefix + "width attr"); + }); + }; + this.test_img_shape("image/png", false); + this.test_img_shape("image/png", true); + this.test_img_shape("image/jpeg", false); + this.test_img_shape("image/jpeg", true); +}); From 0d1536c390a612fc271440d74b6fb2e31ee15a18 Mon Sep 17 00:00:00 2001 From: MinRK Date: Mon, 27 Jan 2014 14:36:33 -0800 Subject: [PATCH 3/4] use jQuery attr instead of setAttribute when appending images. This was an optimization with no apparent performance benefit. --- IPython/html/static/notebook/js/outputarea.js | 11 +++++------ 1 file changed, 5 insertions(+), 6 deletions(-) diff --git a/IPython/html/static/notebook/js/outputarea.js b/IPython/html/static/notebook/js/outputarea.js index 9a1aed583..cac8cb055 100644 --- a/IPython/html/static/notebook/js/outputarea.js +++ b/IPython/html/static/notebook/js/outputarea.js @@ -617,17 +617,16 @@ var IPython = (function (IPython) { var set_width_height = function (img, md, mime) { // set width and height of an img element from metadata var height = _get_metadata_key(md, 'height', mime); - if (height !== undefined) img.setAttribute('height', height); + if (height !== undefined) img.attr('height', height); var width = _get_metadata_key(md, 'width', mime); - if (width !== undefined) img.setAttribute('width', width); + if (width !== undefined) img.attr('width', width); }; OutputArea.prototype.append_png = function (png, md, element) { var type = 'image/png'; var toinsert = this.create_output_subarea(md, "output_png", type); - var img = $(""); - img[0].setAttribute('src','data:image/png;base64,'+png); - set_width_height(img[0], md, 'image/png'); + var img = $("").attr('src','data:image/png;base64,'+png); + set_width_height(img, md, 'image/png'); this._dblclick_to_reset_size(img); toinsert.append(img); element.append(toinsert); @@ -638,7 +637,7 @@ var IPython = (function (IPython) { var type = 'image/jpeg'; var toinsert = this.create_output_subarea(md, "output_jpeg", type); var img = $("").attr('src','data:image/jpeg;base64,'+jpeg); - set_width_height(img[0], md, 'image/jpeg'); + set_width_height(img, md, 'image/jpeg'); this._dblclick_to_reset_size(img); toinsert.append(img); element.append(toinsert); From 63eb905a02770d9e2c7d4bd6a9f349baf221f48d Mon Sep 17 00:00:00 2001 From: MinRK Date: Mon, 27 Jan 2014 15:06:36 -0800 Subject: [PATCH 4/4] try assertType instead of NotEquals, null --- IPython/html/tests/casperjs/test_cases/display_image.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/IPython/html/tests/casperjs/test_cases/display_image.js b/IPython/html/tests/casperjs/test_cases/display_image.js index 336d94efc..86b9319b7 100644 --- a/IPython/html/tests/casperjs/test_cases/display_image.js +++ b/IPython/html/tests/casperjs/test_cases/display_image.js @@ -45,7 +45,7 @@ casper.notebook_test(function () { }; }); var prefix = "Image('" + fmt + "', retina=" + retina + ") "; - this.test.assertNotEquals(img, null, prefix + "img was displayed"); + this.test.assertType(img, "object", prefix + "img was displayed"); this.test.assertEquals(img.src.split(',')[0], "data:" + fmt + ";base64", prefix + "data-uri prefix" );