Shoutbox

I'm working on a new image editor for YASS, and I've run into a problem with positioning text. Text is being generated with PHP as an image. The problem I'm facing, is in the actual image text position is based on the baseline of the text, and letters with underhang (jgy etc.) are placed below the vertical position of the text. On the editor, all the different elements are being generated as independent images. When images with the text are generated, the bottom of the image ends up being the vertical alignment, and basically all the text is higher than its supposed to be. What I am trying to do, is somehow send the HTML page embedding the image (and the JavaScript in the page) a numeric value that shows how much the image should be offset by vertically, how much lower it should be moved.

Now I can think of 2 possible ways to do this, the first being a separate XMLHTTPRequest to get the value, or somehow embedding the value in the URL, the PHP script would forward the request to another URL, but really being the same with the added number on the end.

I don't really want to have to do the first method, as it would result in an extra request, and I'm not sure how to go about implementing the second method. If anyone has any suggestions on how to do that, or any other methods of sending the value would be greatly appreciated.

What about letting your PHP script produce data as JSON? Something like:

code:

---

{ offsetY: 10, image: "‰PNG..." }

---

Hm, now thats an interesting idea. How would I get Javascript in the browser to display the image though? Right now I'm using new Image(), setting a src, and appending as a child node for the initial loading of the page. I haven't added in the dynamic updating yet, but should be easy enough just to change the src and position as needed. So yeah, ho do I get the image data from a JSON into an IMG tag?

XMLHttpRequest lets you access HTTP response headers, right?

php code:

---

header("X-My-Custom-Header: {$my_numeric_value}");

echo $image_data;

---

js code:

---

var my_numeric_value = req.getResponseHeader('X-My-Custom-Header');

---

Thanks WDZ. I'll see if that can work with what I have, because I don't use XMLHTTPRequest to load the image. I was also speaking with Matti offline, he suggested returning a JSON with the offset and a URL to a cache that has the image to be loaded.

OK, so how can XMLHTTPRequest load an image...

quote:

---

Originally posted by MeEtc
OK, so how can XMLHTTPRequest load an image...

---

Good question... I didn't think that through before posting. I just thought using a header would be easier than wrapping everything in JSON like Matti suggested.

You might be able to do it using a data: URI...

js code:

---

imageElement.src = "data:image/png;base64," + req.responseText;

---

That code would require the image data to be base64-encoded on the server side. It might work without encoding too, but you can test that yourself.

yeah, i was thinking using that earlier too. Encoding it with base64 isn't difficult
But it doesn't work in IE...


EDIT: I found someone who's doing it, sort of...
http://www.hedgerwow.com/360/dhtml/base64-image/demp.php
Uses MHTML and VML ? But using that isn't going to help for dynamic pages