Results 1 to 4 of 4

Thread: how to transfer values from onclick button to an image tag

  1. #1
    Join Date
    Jul 2013
    Posts
    8
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default how to transfer values from onclick button to an image tag

    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

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    29,165
    Thanks
    44
    Thanked 3,239 Times in 3,200 Posts
    Blog Entries
    12

    Default

    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.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  3. #3
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    29,165
    Thanks
    44
    Thanked 3,239 Times in 3,200 Posts
    Blog Entries
    12

    Default

    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.
    Last edited by jscheuer1; 07-12-2013 at 10:43 AM. Reason: code improvement, details
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  4. #4
    Join Date
    Jul 2013
    Posts
    8
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    Hello John

    thank you very very much for your kind assistance in this matter. i learnt a lot from your code.

    warm regards

    Andreea

Similar Threads

  1. Replies: 2
    Last Post: 05-20-2012, 05:47 AM
  2. Replies: 5
    Last Post: 09-05-2011, 10:16 PM
  3. Replies: 2
    Last Post: 07-06-2008, 03:21 PM
  4. plugging in selected radio button values
    By heimskr in forum JavaScript
    Replies: 0
    Last Post: 11-10-2006, 04:20 PM
  5. onClick values
    By Zibba in forum HTML
    Replies: 2
    Last Post: 07-14-2006, 02:38 AM

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •