# Getting a JSImage into an HTML area

**URL:** <https://forum.servoy.com/t/getting-a-jsimage-into-an-html-area/6506>\
**Category:** Classic Servoy\
**Created:** [September 29, 2006, 2:26am UTC](https://forum.servoy.com/t/getting-a-jsimage-into-an-html-area/6506 "2006-09-29T02:26:15Z")\
**Posts on this page:** 10\
**Page:** 1

<div class="post-metadata">

**Author:** ![dponti](https://avatars.discourse-cdn.com/v4/letter/d/da6949/32.png) [@dponti](https://forum.servoy.com/u/dponti)\
**Post date:** [September 29, 2006, 2:26am UTC](https://forum.servoy.com/t/getting-a-jsimage-into-an-html-area/6506/1 "2006-09-29T02:26:15Z")

</div>

Hi - I want to extract an image from a media field in a table, manipulate it using the Images plug-in (specifically scale and optionally rotate it) and then get the resulting new JSImage object to display in an html area for a report using \<img src =…

Is there some html syntax for doing this, or another trick? I suppose I could write the JSImage back to a field in the table and then load using media:///servoy\_blobloader in the html area, but I don’t want to create an extra table field for this as these manipulations are only done for various reports…

---

<div class="post-metadata">

**Author:** ![bcusick](https://avatars.discourse-cdn.com/v4/letter/b/ed8c4c/32.png) [@bcusick](https://forum.servoy.com/u/bcusick)\
**Post date:** [September 30, 2006, 2:18pm UTC](https://forum.servoy.com/t/getting-a-jsimage-into-an-html-area/6506/2 "2006-09-30T14:18:26Z")

</div>

You can use a global media variable… or an undeclared “global” variable.

Rather than saying:

var myPict = xxxxxxxx

Just say:

myPict = xxxxxxx

---

<div class="post-metadata">

**Author:** ![dponti](https://avatars.discourse-cdn.com/v4/letter/d/da6949/32.png) [@dponti](https://forum.servoy.com/u/dponti)\
**Post date:** [October 2, 2006, 5:15am UTC](https://forum.servoy.com/t/getting-a-jsimage-into-an-html-area/6506/3 "2006-10-02T05:15:12Z")

</div>

Hmm, there’s something I’m not getting right in trying to access the image in html. So I tried this:

var image = plugins.images.getImage(record.photo);  
image = image.rotate(30);  
var imgheight = image.getHeight();  
var imgwidth = image.getWidth();  
myPict = image.getData();// global media dataprovider

text += ‘ ![]()’;

and I get a broken image icon. I tried also using globals. and a couple of other things, and nothing’s working.

However, if I write the rotated image to a “real” db field. And then go back and access that field in the \<img src = media:///servoy\_blobloader… tag, it works.

What am I doing wrong?

---

<div class="post-metadata">

**Author:** ![dponti](https://avatars.discourse-cdn.com/v4/letter/d/da6949/32.png) [@dponti](https://forum.servoy.com/u/dponti)\
**Post date:** [October 17, 2006, 3:39pm UTC](https://forum.servoy.com/t/getting-a-jsimage-into-an-html-area/6506/4 "2006-10-17T15:39:33Z")

</div>

I thought I’d bump this after two weeks. Does anyone know how to get an image (manipulated through the Images plug-in) to display in an html area WITHOUT having to write the image back into the database first? I can’t seem to get the globals that Bob suggested trying to work, but perhaps I don’t understand his solution.

Thanks!

---

<div class="post-metadata">

**Author:** ![chartpacs](https://avatars.discourse-cdn.com/v4/letter/c/8edcca/32.png) [@chartpacs](https://forum.servoy.com/u/chartpacs)\
**Post date:** [October 17, 2006, 11:06pm UTC](https://forum.servoy.com/t/getting-a-jsimage-into-an-html-area/6506/5 "2006-10-17T23:06:30Z")

</div>

Hello,

That’s a really good question. I was hoping for something like “globals:///\<your\_global\_media\_field\>”. I have a clunky workaround, which involves writing a temp file to the local hard drive and then reading it back.

```auto
// saving the file in the OS-specific temp directory (need free Tools plugin from it2be.com)
// of course, you can save it anywhere
var tempPath = plugins.it2be_tools.client().tempDir;
var filePath = tempPath + "/my_image.jpg";
   
var myImage = plugins.images.getImage(record.photo);
myImage = myImage.rotate(30);
myImage = myImage.getData();

var pluginResult = plugins.file.writeFile(filePath, myImage);
if (pluginResult)
{
	var myHTML = '<html><img src="file://' + filePath + '"></html>';
}

```

There _has_ to be an easier way.

---

<div class="post-metadata">

**Author:** ![fdoddridge](https://avatars.discourse-cdn.com/v4/letter/f/aeb1de/32.png) [@fdoddridge](https://forum.servoy.com/u/fdoddridge)\
**Post date:** [October 18, 2006, 6:31pm UTC](https://forum.servoy.com/t/getting-a-jsimage-into-an-html-area/6506/6 "2006-10-18T18:31:16Z")

</div>

The challenge you’re going to have with this is that the HMTL rendering engine really doesn’t have a way of reading in in-memory images… that I know of. There are ways of using the DOM to set element attributes via javascript on the client (element.src=xxx), but again this sets a reference to a file or dynamic script that is loaded into the page.

So… brainstorming on ways to get an in-memory image to load into an HTML img element.

One option is to create a servlet plugin like the blobloader, but the problem there is that the servlet can only “see” data on the server. If you have a reference to a byte array on the client the only way the server (and the servlet) can see that is if you persist that image data to the server which is what we’re trying to avoid, right?

Another _oh so trivial_ option is to modify the HTML rendering engine to pull in a byte array from memory.

But I think that the best, and cleanest short term way of solving this is to use chartpacs solution of writing the image to a local file. You could even wrap that up into a plugin for easier re-use.

I guess you could always play with the html area’s DOM to see if setting a src attribute on the Image object works with a byte array.

Sounds like fun… good luck. ![:)]( "Smile")

---

<div class="post-metadata">

**Author:** ![dponti](https://avatars.discourse-cdn.com/v4/letter/d/da6949/32.png) [@dponti](https://forum.servoy.com/u/dponti)\
**Post date:** [October 19, 2006, 4:50pm UTC](https://forum.servoy.com/t/getting-a-jsimage-into-an-html-area/6506/7 "2006-10-19T16:50:09Z")

</div>

Sean and Fred:

Thanks for the insights and suggestions. Sean’s solution to write to local files is certainly a better approach (for our solution anyway) than writing to the database, but I agree that it’s clunky. I guess we’ll go this route unless something better is identified…

Regarding exploring the rendering engine DOM to see if setting a src attribute would work - I must admit that I am too DOM challenged to even fully understand what you are suggesting, let alone how to do this - do you have instructions to test to see if this would work?

Any insights from the Servoy development gurus?

Thanks again!

---

<div class="post-metadata">

**Author:** ![pbakker](https://avatars.discourse-cdn.com/v4/letter/p/a4c791/32.png) [@pbakker](https://forum.servoy.com/u/pbakker)\
**Post date:** [November 15, 2006, 1:08pm UTC](https://forum.servoy.com/t/getting-a-jsimage-into-an-html-area/6506/8 "2006-11-15T13:08:32Z")

</div>

In Servoy 3.1 B2 it will be possible to combine global variables with the servoy\_blobloader, so you will be able to do the following:

```auto
var image = plugins.images.getImage(record.photo); 
image = image.rotate(30); 
var imgheight = image.getHeight(); 
var imgwidth = image.getWidth(); 
globals.picture = image.getData();

var html = '.......<img src= "media:///servoy_blobloader?global=picture>....................';

```

note: If you would declare the global on the fly (dynamically, so not predefined in developer under dataproviders), make sure to set them to a null value (globals.xxx = null;) when you do not need them anymore. this way, they will be cleaned up automatically. Otherwise, them will stay in memory for the entire length of the session.

Paul

---

<div class="post-metadata">

**Author:** ![fsciweb](https://avatars.discourse-cdn.com/v4/letter/f/46a35a/32.png) [@fsciweb](https://forum.servoy.com/u/fsciweb)\
**Post date:** [November 20, 2007, 1:42am UTC](https://forum.servoy.com/t/getting-a-jsimage-into-an-html-area/6506/9 "2007-11-20T01:42:22Z")

</div>

Is there a way to reference media held in a global array? (ie, multiple images assigned to an array within a media type global).

See my full question here;

[http://forum.servoy.com/viewtopic.php?t=5024](http://forum.servoy.com/viewtopic.php?t=5024)

---

<div class="post-metadata">

**Author:** ![pbakker](https://avatars.discourse-cdn.com/v4/letter/p/a4c791/32.png) [@pbakker](https://forum.servoy.com/u/pbakker)\
**Post date:** [November 20, 2007, 8:50am UTC](https://forum.servoy.com/t/getting-a-jsimage-into-an-html-area/6506/10 "2007-11-20T08:50:15Z")

</div>

See the answer on the other port.

Paul

PS: Please do not double post…