how to transfer values from onclick button to an image tag

**andreea115** · 07-11-2013, 04:03 PM

hi everyone

i am fairly new to javascript and trying to resolve a problem. i want to use the onclick button to transfer values from a textarea field and place them into SPAN tag that are held within a img src tag

i have tried transferring the values from the textarea field to another textextea field and it works perfectly. i run into problems however when i try to transfer it into span tags. i will demonstrate below

the sample below works

PHP Code:


             <textarea id="thesourcearea" readonly></textarea>



              <button onclick="$('#thearea').val( $('#thesourcearea').text() ) ;">click me </button>

      

             <textarea id="thearea" readonly></textarea>

however, i want to transfer the values into a set of span tags that is held within the SRC of an image tags

PHP Code:


              <textarea id="thesourcearea" readonly></textarea>



              <button onclick="$('#thearea').val( $('#thesourcearea').text() ) ;">click me </button>





              <img src="<?= base64_encode("<span id='thearea' > </span>" ) ?>" style="vertical-align: middle" />

The base64_encode is PHP code used to encode the values return; it is for the reason of encoding that i need to place the returned values within the base64_enclode.

i would be really grateful if someone could tell me how to get the values inside the span tag.

warm regards

Andreea
l

**jscheuer1** · 07-12-2013, 04:43 AM

PHP is not a real time language like javascript, and even if it were and you got your text into that span, the span tag itself would probably corrupt the image.

You could submit the page to itself with the textarea's value as POST data and have PHP interpret that as the src of the image. You could probably even use AJAX to send a POST request to the server, to say - a page with an image header that would encode the text as an image and have that page then be set as the src of the img tag. But that might have some problems. You might need a way for PHP to determine what type of image (PNG, JPEG, GIF, etc.) the image is before sending the header. If the encoding process takes care of the header though, looks like it might, it could work out. If you post a simple example text for making a simple image, I can play around with both ideas and give you examples of how to make them work. I'm like 99% sure that submitting the page to itself will work. I'm not as confident about the AJAX approach, but it probably would work. Getting it to be the src of the img tag might be a problem as well. I would see.

**jscheuer1** · 07-12-2013, 06:04 AM

Mmm, I looked into this a bit more, and if you already have a base 64 encoded string (you cannot copy, type or paste non base 64 encoded image data into a textarea anyway), no PHP is required, and for GIF (I tested with a 1 x 1 transparent GIF image), it doesn't seem to matter what file format you use, but I've included that in the code anyway:

Code:

<!DOCTYPE html>
<html>
<head>
<title>String to Image</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
img {border: 1px solid black;background-color:red;padding:1px;width:100px;height:100px;}
</style>
</head>
<body>
<img id="image" width="100" height="100" alt="missing image" title=""><br>
<form id="form" action="#">
<textarea name="imagetext" cols="50" rows="5" wrap="off">R0lGODlhAQABAIAAAP///////yH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==</textarea><br>
Choose Format:<br>
GIF: <input type="radio" name="format" value="gif"><br>
JPEG: <input type="radio" name="format" value="jpeg"><br>
PNG: <input type="radio" name="format" value="png"><br>
Show at Native Dimensions (check for yes): <input type="checkbox" name="native" value="native"><br>
Show with no Background (check for yes): <input type="checkbox" name="nobg" value="nobg"><br>
<input type="submit" value="Go">
</form>
<script type="text/javascript">
document.getElementById('form').onsubmit = function(e){
	e = e || event;
	e.preventDefault && e.preventDefault();
	e.returnValue = false;
	var format, formats = this.elements.format, i = formats.length, image = document.getElementById('image');
	if(this.elements.native.checked){
		image.style.width = image.style.height = 'auto';
	} else {image.style.width = image.style.height = '';}
	if(this.elements.nobg.checked){
		image.style.background = 'none';
	} else {image.style.background = '';}
	while(--i > -1){
		if(formats[i].checked){
			format = formats[i].value;
			break;
		}
	}
	image.src = 'data:image/' + (format || 'jpeg') + ';base64,' + this.elements.imagetext.value;
}
</script>
</body>
</html>

When the page loads you will see a red square with the alt text (missing image) in it. After submitting (the Go button), the text will disappear because the transparent GIF image is there. You will still see the red though, because the image is transparent, except in IE 8 and less which don't allow background for images. The image still loads though, and will show the page background (white).

I later also tried this with a large JPEG image and it failed, but with small and medium sized ones it worked fine.

Ah, but then I discovered that the problem with the larger image was that I hadn't gotten the entire base 64 encoded data for it. Once I was able to do that, it worked. If you're interested in how to get the base 64 encoded data from an image, let me know. My method requires PHP 5 or greater (but could be rewritten for PHP 4) and for images not on the server, requires permission to open remote files be set in PHP, and it can be preformed via AJAX, for which I used jQuery.