{"id":629,"date":"2012-06-28T12:55:29","date_gmt":"2012-06-28T16:55:29","guid":{"rendered":"https:\/\/blogs.mathworks.com\/steve\/?p=629"},"modified":"2019-10-31T14:49:58","modified_gmt":"2019-10-31T18:49:58","slug":"how-im2html-works","status":"publish","type":"post","link":"https:\/\/blogs.mathworks.com\/steve\/2012\/06\/28\/how-im2html-works\/","title":{"rendered":"How im2html works"},"content":{"rendered":"<div class=\"content\"><!--introduction--><!--\/introduction--><p>On <a href=\"https:\/\/blogs.mathworks.com\/steve\/2012\/06\/02\/making-an-html-table-of-pixel-values-with-colored-cells\/\">June 2<\/a> I showed you how to make a table with image colors and pixels appear when you publish your MATLAB scripts to HTML using the <a href=\"https:\/\/www.mathworks.com\/help\/releases\/R2012a\/techdoc\/ref\/publish.html\"><tt>publish<\/tt><\/a> function. The result looks like this:<\/p><pre class=\"codeinput\">rgb = imread(<span class=\"string\">'peppers.png'<\/span>);\r\ndisp(im2html(rgb(88:92,200:204,:)))\r\n<\/pre>\r\n  <head>\r\n\r\n    <style>\r\n      .image-table {\r\n        border: thin solid black;\r\n        table-layout: fixed;\r\n      }\r\n\r\n      .light-pixel-cell {\r\n        font-size: small;\r\n        font-family: Consolas, 'Courier New', monospace;\r\n        border-style: solid;\r\n        border-width: thin;\r\n        border-color: black;\r\n        padding: 1;\r\n        height: 4.5em;\r\n        width: 4.5em;\r\n        text-align: center;\r\n        color: black;\r\n      }\r\n\r\n      .dark-pixel-cell {\r\n        font-size: small;\r\n        font-family: Consolas, 'Courier New', monospace;\r\n        border-style: solid;\r\n        border-width: thin;\r\n        border-color: black;\r\n        padding: 1;\r\n        height: 4.5em;\r\n        width: 4.5em;\r\n        text-align: center;\r\n        color: white;\r\n      }\r\n\r\n    <\/style>\r\n\r\n  <\/head>\r\n  <body>\r\n    <table class=\"image-table\">\r\n      <tr class=\"image-table-row\">\r\n        <!-- ROW: 1  COL: 1 -->\r\n        <td class=\"dark-pixel-cell\" style=\"background-color:#50324D; width:5.0em; height:5.0em\">\r\n          R:80<br \\>G:50<br \\>B:77\r\n        <\/td>\r\n\r\n        <!-- ROW: 1  COL: 2 -->\r\n        <td class=\"dark-pixel-cell\" style=\"background-color:#4E2F4A; width:5.0em; height:5.0em\">\r\n          R:78<br \\>G:47<br \\>B:74\r\n        <\/td>\r\n\r\n        <!-- ROW: 1  COL: 3 -->\r\n        <td class=\"dark-pixel-cell\" style=\"background-color:#4C2F47; width:5.0em; height:5.0em\">\r\n          R:76<br \\>G:47<br \\>B:71\r\n        <\/td>\r\n\r\n        <!-- ROW: 1  COL: 4 -->\r\n        <td class=\"dark-pixel-cell\" style=\"background-color:#5F4149; width:5.0em; height:5.0em\">\r\n          R:95<br \\>G:65<br \\>B:73\r\n        <\/td>\r\n\r\n        <!-- ROW: 1  COL: 5 -->\r\n        <td class=\"light-pixel-cell\" style=\"background-color:#9E8175; width:5.0em; height:5.0em\">\r\n          R:158<br \\>G:129<br \\>B:117\r\n        <\/td>\r\n\r\n      <\/tr>\r\n\r\n      <tr class=\"image-table-row\">\r\n        <!-- ROW: 2  COL: 1 -->\r\n        <td class=\"dark-pixel-cell\" style=\"background-color:#4C2F4D; width:5.0em; height:5.0em\">\r\n          R:76<br \\>G:47<br \\>B:77\r\n        <\/td>\r\n\r\n        <!-- ROW: 2  COL: 2 -->\r\n        <td class=\"dark-pixel-cell\" style=\"background-color:#4B2E47; width:5.0em; height:5.0em\">\r\n          R:75<br \\>G:46<br \\>B:71\r\n        <\/td>\r\n\r\n        <!-- ROW: 2  COL: 3 -->\r\n        <td class=\"dark-pixel-cell\" style=\"background-color:#5B3F48; width:5.0em; height:5.0em\">\r\n          R:91<br \\>G:63<br \\>B:72\r\n        <\/td>\r\n\r\n        <!-- ROW: 2  COL: 4 -->\r\n        <td class=\"light-pixel-cell\" style=\"background-color:#9E8277; width:5.0em; height:5.0em\">\r\n          R:158<br \\>G:130<br \\>B:119\r\n        <\/td>\r\n\r\n        <!-- ROW: 2  COL: 5 -->\r\n        <td class=\"light-pixel-cell\" style=\"background-color:#C0A58D; width:5.0em; height:5.0em\">\r\n          R:192<br \\>G:165<br \\>B:141\r\n        <\/td>\r\n\r\n      <\/tr>\r\n\r\n      <tr class=\"image-table-row\">\r\n        <!-- ROW: 3  COL: 1 -->\r\n        <td class=\"dark-pixel-cell\" style=\"background-color:#4D2D46; width:5.0em; height:5.0em\">\r\n          R:77<br \\>G:45<br \\>B:70\r\n        <\/td>\r\n\r\n        <!-- ROW: 3  COL: 2 -->\r\n        <td class=\"dark-pixel-cell\" style=\"background-color:#52333F; width:5.0em; height:5.0em\">\r\n          R:82<br \\>G:51<br \\>B:63\r\n        <\/td>\r\n\r\n        <!-- ROW: 3  COL: 3 -->\r\n        <td class=\"light-pixel-cell\" style=\"background-color:#947872; width:5.0em; height:5.0em\">\r\n          R:148<br \\>G:120<br \\>B:114\r\n        <\/td>\r\n\r\n        <!-- ROW: 3  COL: 4 -->\r\n        <td class=\"light-pixel-cell\" style=\"background-color:#C0A692; width:5.0em; height:5.0em\">\r\n          R:192<br \\>G:166<br \\>B:146\r\n        <\/td>\r\n\r\n        <!-- ROW: 3  COL: 5 -->\r\n        <td class=\"light-pixel-cell\" style=\"background-color:#CBB099; width:5.0em; height:5.0em\">\r\n          R:203<br \\>G:176<br \\>B:153\r\n        <\/td>\r\n\r\n      <\/tr>\r\n\r\n      <tr class=\"image-table-row\">\r\n        <!-- ROW: 4  COL: 1 -->\r\n        <td class=\"dark-pixel-cell\" style=\"background-color:#4B2B41; width:5.0em; height:5.0em\">\r\n          R:75<br \\>G:43<br \\>B:65\r\n        <\/td>\r\n\r\n        <!-- ROW: 4  COL: 2 -->\r\n        <td class=\"dark-pixel-cell\" style=\"background-color:#7E5F61; width:5.0em; height:5.0em\">\r\n          R:126<br \\>G:&nbsp;95<br \\>B:&nbsp;97\r\n        <\/td>\r\n\r\n        <!-- ROW: 4  COL: 3 -->\r\n        <td class=\"light-pixel-cell\" style=\"background-color:#BAA091; width:5.0em; height:5.0em\">\r\n          R:186<br \\>G:160<br \\>B:145\r\n        <\/td>\r\n\r\n        <!-- ROW: 4  COL: 4 -->\r\n        <td class=\"light-pixel-cell\" style=\"background-color:#C5AD9A; width:5.0em; height:5.0em\">\r\n          R:197<br \\>G:173<br \\>B:154\r\n        <\/td>\r\n\r\n        <!-- ROW: 4  COL: 5 -->\r\n        <td class=\"light-pixel-cell\" style=\"background-color:#D0B4A0; width:5.0em; height:5.0em\">\r\n          R:208<br \\>G:180<br \\>B:160\r\n        <\/td>\r\n\r\n      <\/tr>\r\n\r\n      <tr class=\"image-table-row\">\r\n        <!-- ROW: 5  COL: 1 -->\r\n        <td class=\"dark-pixel-cell\" style=\"background-color:#644648; width:5.0em; height:5.0em\">\r\n          R:100<br \\>G:&nbsp;70<br \\>B:&nbsp;72\r\n        <\/td>\r\n\r\n        <!-- ROW: 5  COL: 2 -->\r\n        <td class=\"light-pixel-cell\" style=\"background-color:#AE9287; width:5.0em; height:5.0em\">\r\n          R:174<br \\>G:146<br \\>B:135\r\n        <\/td>\r\n\r\n        <!-- ROW: 5  COL: 3 -->\r\n        <td class=\"light-pixel-cell\" style=\"background-color:#C1A997; width:5.0em; height:5.0em\">\r\n          R:193<br \\>G:169<br \\>B:151\r\n        <\/td>\r\n\r\n        <!-- ROW: 5  COL: 4 -->\r\n        <td class=\"light-pixel-cell\" style=\"background-color:#C6AF9E; width:5.0em; height:5.0em\">\r\n          R:198<br \\>G:175<br \\>B:158\r\n        <\/td>\r\n\r\n        <!-- ROW: 5  COL: 5 -->\r\n        <td class=\"light-pixel-cell\" style=\"background-color:#D3BDAA; width:5.0em; height:5.0em\">\r\n          R:211<br \\>G:189<br \\>B:170\r\n        <\/td>\r\n\r\n      <\/tr>\r\n\r\n    <\/table>\r\n  <\/body>\r\n<p>Today I want to follow up with a few details about how this works.<\/p><p>First, I am taking advantage of the ability when publishing a MATLAB script to embed dynamically-generated HTML. To see how that works, let's start with some fixed HTML.<\/p><pre class=\"codeinput\">str = [<span class=\"string\">'&lt;html&gt;'<\/span> <span class=\"keyword\">...<\/span>\r\n    <span class=\"string\">'&lt;span style=\"color:white; background-color:black;\"&gt;'<\/span> <span class=\"keyword\">...<\/span>\r\n    <span class=\"string\">'White text on black background'<\/span> <span class=\"keyword\">...<\/span>\r\n    <span class=\"string\">'&lt;\/span&gt;'<\/span> <span class=\"keyword\">...<\/span>\r\n    <span class=\"string\">'&lt;\/html&gt;'<\/span>];\r\ndisp(str)\r\n<\/pre><span style=\"color:white; background-color:black;\">White text on black background<\/span><p>To make a simple dynamic example, let's make a random background color and then automatically assign the foreground color to be white or black, depending on how dark the background color is.<\/p><pre class=\"codeinput\">bg_color = rand(1,3)\r\n<\/pre><pre class=\"codeoutput\">\r\nbg_color =\r\n\r\n    0.3404    0.5853    0.2238\r\n\r\n<\/pre><pre class=\"codeinput\">bg_as_gray = rgb2gray(bg_color)\r\n<\/pre><pre class=\"codeoutput\">\r\nbg_as_gray =\r\n\r\n    0.4709    0.4709    0.4709\r\n\r\n<\/pre><pre class=\"codeinput\"><span class=\"keyword\">if<\/span> bg_as_gray(1) &gt; 0.6\r\n    fg_color = <span class=\"string\">'black'<\/span>;\r\n<span class=\"keyword\">else<\/span>\r\n    fg_color = <span class=\"string\">'white'<\/span>;\r\n<span class=\"keyword\">end<\/span>\r\n\r\nfg_color\r\n<\/pre><pre class=\"codeoutput\">\r\nfg_color =\r\n\r\nwhite\r\n\r\n<\/pre><p>Now make the HTML string again, this time inserting the dynamically generated colors. (First, though, convert the background color RGB values to be uint8 in the range [0,255].)<\/p><pre class=\"codeinput\">bg_color = im2uint8(bg_color);\r\nstr = sprintf([<span class=\"string\">'&lt;html&gt;'<\/span> <span class=\"keyword\">...<\/span>\r\n    <span class=\"string\">'&lt;span style=\"color:%s; background-color:rgb(%d,%d,%d);\"&gt;'<\/span> <span class=\"keyword\">...<\/span>\r\n    <span class=\"string\">'Contrasting text on randomly colored background'<\/span> <span class=\"keyword\">...<\/span>\r\n    <span class=\"string\">'&lt;\/span&gt;'<\/span> <span class=\"keyword\">...<\/span>\r\n    <span class=\"string\">'&lt;\/html&gt;'<\/span>], fg_color, bg_color(1), bg_color(2), bg_color(3));\r\ndisp(str)\r\n<\/pre><span style=\"color:white; background-color:rgb(87,149,57);\">Contrasting text on randomly colored background<\/span><p>So the <tt>im2html<\/tt> function simply produces an HTML table with dynamically generated table cell colors and pixel-value text strings. Here's an illustrative sample of the generated HTML:<\/p><pre>&lt;table class=\"image-table\"&gt;\r\n  &lt;tr class=\"image-table-row\"&gt;\r\n    &lt;!-- ROW: 1  COL: 1 --&gt;\r\n    &lt;td class=\"dark-pixel-cell\" style=\"background-color:#50324D; width:5.0em; height:5.0em\"&gt;\r\n      R:80&lt;br \\&gt;G:50&lt;br \\&gt;B:77\r\n    &lt;\/td&gt;<\/pre><p>Now we know the basics of dynamically generating some HTML and rendering it in your published output. How do we use that to generate our image pixel-color tables? It's more complicated than you might think.<\/p><p>First, remember that the MATLAB image display model is very flexible. The relationship between a pixel value and the actual color displayed on the screen can depend on these various factors:<\/p><div><ul><li>Whether the image is in truecolor or indexed format<\/li><li>The data type of the pixel array<\/li><li>The figure's colormap<\/li><li>The axes object's CLim property<\/li><\/ul><\/div><p>(I wrote a <a href=\"https:\/\/blogs.mathworks.com\/steve\/category\/pixel-colors\/\">whole series of blog posts<\/a> about this topic way back when.)<\/p><p>Second, it can be complicated to figure out how to format the pixel-value text for all the different cases. Sometimes there is one value, sometimes three, sometimes both an index and a colormap value, sometimes the values integers, sometimes floating, ...<\/p><p>You get the idea.<\/p><p>Well, there's a tool in the Image Processing Toolbox called <tt>imagemodel<\/tt> that provides these services. We don't talk about it very much because we think it's not particularly useful to most toolbox users. However, if you are doing GUI programming involving images, it might come in handy.<\/p><p><tt>imagemodel<\/tt> takes a Handle Graphics image handle and returns an object that you can query.<\/p><pre class=\"codeinput\">h = imshow(<span class=\"string\">'peppers.png'<\/span>);\r\n<\/pre><img decoding=\"async\" vspace=\"5\" hspace=\"5\" src=\"https:\/\/blogs.mathworks.com\/images\/steve\/2012\/im2html_example_part2_01.png\" alt=\"\"> <pre class=\"codeinput\">model = imagemodel(h)\r\n<\/pre><pre class=\"codeoutput\"> \r\nmodel =\r\n \r\nIMAGEMODEL object accessing an image with these properties:\r\n\r\n       ClassType: 'uint8'\r\n    DisplayRange: []\r\n     ImageHeight: 384\r\n       ImageType: 'truecolor'\r\n      ImageWidth: 512\r\n    MinIntensity: []\r\n    MaxIntensity: []\r\n\r\n \r\n<\/pre><p>Here's how to get the RGB screen display color for a particular pixel:<\/p><pre class=\"codeinput\">getScreenPixelRGBValue(model, 5, 10)\r\n<\/pre><pre class=\"codeoutput\">\r\nans =\r\n\r\n    0.2588    0.1216    0.2510\r\n\r\n<\/pre><p>I can get the RGB screen display color exactly the same way, even for a completely different kind of image. Below is a gray-scale image displayed with a black-to-white range of [-1,1].<\/p><pre class=\"codeinput\">theta = linspace(-pi,pi,200);\r\nI = repmat(sin(theta),200,1);\r\nh2 = imshow(I,[-1 1])\r\n<\/pre><pre class=\"codeoutput\">\r\nh2 =\r\n\r\n  347.0363\r\n\r\n<\/pre><img decoding=\"async\" vspace=\"5\" hspace=\"5\" src=\"https:\/\/blogs.mathworks.com\/images\/steve\/2012\/im2html_example_part2_02.png\" alt=\"\"> <pre class=\"codeinput\">model2 = imagemodel(h2);\r\ngetScreenPixelRGBValue(model2, 23, 47)\r\n<\/pre><pre class=\"codeoutput\">\r\nans =\r\n\r\n    0.0039    0.0039    0.0039\r\n\r\n<\/pre><p>For getting pixel-value text strings, you have to ask the image model for a function handle that does the work. Then you can call the function handle. Here's how that would work for the sample image just above.<\/p><pre class=\"codeinput\">f = getPixelRegionFormatFcn(model2);\r\n<\/pre><pre class=\"codeinput\">f(75, 128)\r\n<\/pre><pre class=\"codeoutput\">\r\nans = \r\n\r\n    '0.76'\r\n\r\n<\/pre><p>This is a fairly obscure corner of the Image Processing Toolbox, but I thought some of you might be interested to get a peek into how tools such as the Pixel Region Tool work.<\/p><p><img decoding=\"async\" vspace=\"5\" hspace=\"5\" src=\"https:\/\/blogs.mathworks.com\/images\/steve\/2012\/pixel-region-tool.png\" alt=\"\"> <\/p><script language=\"JavaScript\"> <!-- \r\n    function grabCode_f586adb370414efbbdd1b4ad9e69176a() {\r\n        \/\/ Remember the title so we can use it in the new page\r\n        title = document.title;\r\n\r\n        \/\/ Break up these strings so that their presence\r\n        \/\/ in the Javascript doesn't mess up the search for\r\n        \/\/ the MATLAB code.\r\n        t1='f586adb370414efbbdd1b4ad9e69176a ' + '##### ' + 'SOURCE BEGIN' + ' #####';\r\n        t2='##### ' + 'SOURCE END' + ' #####' + ' f586adb370414efbbdd1b4ad9e69176a';\r\n    \r\n        b=document.getElementsByTagName('body')[0];\r\n        i1=b.innerHTML.indexOf(t1)+t1.length;\r\n        i2=b.innerHTML.indexOf(t2);\r\n \r\n        code_string = b.innerHTML.substring(i1, i2);\r\n        code_string = code_string.replace(\/REPLACE_WITH_DASH_DASH\/g,'--');\r\n\r\n        \/\/ Use \/x3C\/g instead of the less-than character to avoid errors \r\n        \/\/ in the XML parser.\r\n        \/\/ Use '\\x26#60;' instead of '<' so that the XML parser\r\n        \/\/ doesn't go ahead and substitute the less-than character. \r\n        code_string = code_string.replace(\/\\x3C\/g, '\\x26#60;');\r\n\r\n        copyright = 'Copyright 2012 The MathWorks, Inc.';\r\n\r\n        w = window.open();\r\n        d = w.document;\r\n        d.write('<pre>\\n');\r\n        d.write(code_string);\r\n\r\n        \/\/ Add copyright line at the bottom if specified.\r\n        if (copyright.length > 0) {\r\n            d.writeln('');\r\n            d.writeln('%%');\r\n            if (copyright.length > 0) {\r\n                d.writeln('% _' + copyright + '_');\r\n            }\r\n        }\r\n\r\n        d.write('<\/pre>\\n');\r\n\r\n        d.title = title + ' (MATLAB code)';\r\n        d.close();\r\n    }   \r\n     --> <\/script><p style=\"text-align: right; font-size: xx-small; font-weight:lighter;   font-style: italic; color: gray\"><br><a href=\"javascript:grabCode_f586adb370414efbbdd1b4ad9e69176a()\"><span style=\"font-size: x-small;        font-style: italic;\">Get \r\n      the MATLAB code <noscript>(requires JavaScript)<\/noscript><\/span><\/a><br><br>\r\n      Published with MATLAB&reg; 7.14<br><\/p><p class=\"footer\"><br>\r\n      Published with MATLAB&reg; 7.14<br><\/p><\/div><!--\r\nf586adb370414efbbdd1b4ad9e69176a ##### SOURCE BEGIN #####\r\n\r\n%%\r\n% On\r\n% <https:\/\/blogs.mathworks.com\/steve\/2012\/06\/02\/making-an-html-table-of-pixel-values-with-colored-cells\/\r\n% June 2> I showed you how to make a table with image colors and pixels\r\n% appear when you publish your MATLAB scripts to HTML using the\r\n% <https:\/\/www.mathworks.com\/help\/releases\/R2012a\/techdoc\/ref\/publish.html |publish|>\r\n% function. The result looks like this:\r\n\r\nrgb = imread('peppers.png');\r\ndisp(im2html(rgb(88:92,200:204,:)))\r\n\r\n%%\r\n% Today I want to follow up with a few details about how this works. \r\n%\r\n% First, I am taking advantage of the ability when publishing a MATLAB\r\n% script to embed dynamically-generated HTML. To see how that works, let's\r\n% start with some fixed HTML.\r\n\r\nstr = ['<html>' ...\r\n    '<span style=\"color:white; background-color:black;\">' ...\r\n    'White text on black background' ...\r\n    '<\/span>' ...\r\n    '<\/html>'];\r\ndisp(str)\r\n\r\n%%\r\n% To make a simple dynamic example, let's make a random background color\r\n% and then automatically assign the foreground color to be white or black,\r\n% depending on how dark the background color is.\r\n\r\nbg_color = rand(1,3)\r\n\r\n%%\r\n\r\nbg_as_gray = rgb2gray(bg_color)\r\n\r\n%%\r\nif bg_as_gray(1) > 0.6\r\n    fg_color = 'black';\r\nelse\r\n    fg_color = 'white';\r\nend\r\n\r\nfg_color\r\n\r\n%%\r\n% Now make the HTML string again, this time inserting the dynamically\r\n% generated colors. (First, though, convert the background color RGB values\r\n% to be uint8 in the range [0,255].)\r\n\r\nbg_color = im2uint8(bg_color);\r\nstr = sprintf(['<html>' ...\r\n    '<span style=\"color:%s; background-color:rgb(%d,%d,%d);\">' ...\r\n    'Contrasting text on randomly colored background' ...\r\n    '<\/span>' ...\r\n    '<\/html>'], fg_color, bg_color(1), bg_color(2), bg_color(3));\r\ndisp(str)\r\n\r\n%%\r\n% So the |im2html| function simply produces an HTML table with dynamically\r\n% generated table cell colors and pixel-value text strings. Here's an\r\n% illustrative sample of the generated HTML:\r\n%\r\n%  <table class=\"image-table\">\r\n%    <tr class=\"image-table-row\">\r\n%      <!REPLACE_WITH_DASH_DASH ROW: 1  COL: 1 REPLACE_WITH_DASH_DASH>\r\n%      <td class=\"dark-pixel-cell\" style=\"background-color:#50324D; width:5.0em; height:5.0em\">\r\n%        R:80<br \\>G:50<br \\>B:77\r\n%      <\/td>\r\n%\r\n% Now we know the basics of dynamically generating some HTML and rendering\r\n% it in your published output. How do we use that to generate our image\r\n% pixel-color tables? It's more complicated than you might think.\r\n%\r\n% First, remember that the MATLAB image display model is very flexible. The\r\n% relationship between a pixel value and the actual color displayed on the\r\n% screen can depend on these various factors:\r\n%\r\n% * Whether the image is in truecolor or indexed format\r\n% * The data type of the pixel array\r\n% * The figure's colormap\r\n% * The axes object's CLim property\r\n%\r\n% (I wrote a <https:\/\/blogs.mathworks.com\/steve\/category\/pixel-colors\/ whole\r\n% series of blog posts> about this topic way back when.)\r\n%\r\n% Second, it can be complicated to figure out how to format the pixel-value\r\n% text for all the different cases. Sometimes there is one value,\r\n% sometimes three, sometimes both an index and a colormap value, sometimes\r\n% the values integers, sometimes floating, ...\r\n%\r\n% You get the idea.\r\n%\r\n% Well, there's a tool in the Image Processing Toolbox called |imagemodel|\r\n% that provides these services. We don't talk about it very much because we\r\n% think it's not particularly useful to most toolbox users. However, if you\r\n% are doing GUI programming involving images, it might come in handy.\r\n%\r\n% |imagemodel| takes a Handle Graphics image handle and returns an object\r\n% that you can query.\r\n\r\nh = imshow('peppers.png');\r\n\r\n%%\r\nmodel = imagemodel(h)\r\n\r\n%%\r\n% Here's how to get the RGB screen display color for a particular pixel:\r\n\r\ngetScreenPixelRGBValue(model, 5, 10)\r\n\r\n%%\r\n% I can get the RGB screen display color exactly the same way, even for a\r\n% completely different kind of image. Below is a gray-scale image displayed\r\n% with a black-to-white range of [-1,1].\r\n\r\ntheta = linspace(-pi,pi,200);\r\nI = repmat(sin(theta),200,1);\r\nh2 = imshow(I,[-1 1])\r\n\r\n%%\r\nmodel2 = imagemodel(h2);\r\ngetScreenPixelRGBValue(model2, 23, 47)\r\n\r\n%%\r\n% For getting pixel-value text strings, you have to ask the image model for\r\n% a function handle that does the work. Then you can call the function\r\n% handle. Here's how that would work for the sample image just above.\r\n\r\nf = getPixelRegionFormatFcn(model2);\r\n\r\n%%\r\nf(75, 128)\r\n\r\n%%\r\n% This is a fairly obscure corner of the Image Processing Toolbox, but I\r\n% thought some of you might be interested to get a peek into how tools such\r\n% as the Pixel Region Tool work.\r\n%\r\n% <<https:\/\/blogs.mathworks.com\/images\/steve\/2012\/pixel-region-tool.png>>\r\n##### SOURCE END ##### f586adb370414efbbdd1b4ad9e69176a\r\n-->","protected":false},"excerpt":{"rendered":"<p>On June 2 I showed you how to make a table with image colors and pixels appear when you publish your MATLAB scripts to HTML using the publish function. The result looks like this:rgb =... <a class=\"read-more\" href=\"https:\/\/blogs.mathworks.com\/steve\/2012\/06\/28\/how-im2html-works\/\">read more >><\/a><\/p>","protected":false},"author":42,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[1],"tags":[899,452,901,76,36,32,460,116,104,34,270,903],"_links":{"self":[{"href":"https:\/\/blogs.mathworks.com\/steve\/wp-json\/wp\/v2\/posts\/629"}],"collection":[{"href":"https:\/\/blogs.mathworks.com\/steve\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blogs.mathworks.com\/steve\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blogs.mathworks.com\/steve\/wp-json\/wp\/v2\/users\/42"}],"replies":[{"embeddable":true,"href":"https:\/\/blogs.mathworks.com\/steve\/wp-json\/wp\/v2\/comments?post=629"}],"version-history":[{"count":5,"href":"https:\/\/blogs.mathworks.com\/steve\/wp-json\/wp\/v2\/posts\/629\/revisions"}],"predecessor-version":[{"id":3787,"href":"https:\/\/blogs.mathworks.com\/steve\/wp-json\/wp\/v2\/posts\/629\/revisions\/3787"}],"wp:attachment":[{"href":"https:\/\/blogs.mathworks.com\/steve\/wp-json\/wp\/v2\/media?parent=629"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blogs.mathworks.com\/steve\/wp-json\/wp\/v2\/categories?post=629"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blogs.mathworks.com\/steve\/wp-json\/wp\/v2\/tags?post=629"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}