Display the picture in [object HTMLImageElement] using PHP

Question

riahc3 50 Â

11 Years Ago

Hey

I tried to access a cookie that has a [object HTMLImageElement] but when I try to echo it, it simply prints that out: [object HTMLImageElement] I want it to display the picture.

How can I do this?

Thanks

php

5 Contributors
69 Replies
4K Views
2 Weeks Discussion Span
Latest Post 11 Years Ago Latest Post by riahc3

All 69 Replies

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

vibhaJ 126 Master Poster · Answer 1 · 2012-05-09T09:22:41+00:00

vibhaJ 126 Master Poster

11 Years Ago

post your code.

riahc3 50 Â Team Colleague · Answer 2 · 2012-05-09T09:47:37+00:00

I'm currently at a break so in a few mintues, ill post some more code.

I used a canvas2image JS library, in Javascript, I was able to generate the image and display it but I want to save the html code in a cookie and just display it.

riahc3 50 Â Team Colleague · Answer 3 · 2012-05-09T09:55:49+00:00

In Javascript:

var canvas=document.getElementById("can");

            var ojpeg=Canvas2Image.saveAsPNG(canvas,true,100,100);

            document.cookie ='laimagen='+ojpeg+'; expires='+dia.toGMTString()+'; path=/';




            var imgHtml = ojpeg; 
            alert (imgHtml);

Alert pops up with [object HTMLImageElement] and I need to put valid HTML so I can use it in PHP.....

riahc3 50 Â Team Colleague · Answer 4 · 2012-05-09T09:56:46+00:00

The library is this one BTW: http://www.nihilogic.dk/labs/canvas2image/

vibhaJ 126 Master Poster · Answer 5 · 2012-05-09T10:13:36+00:00

I didn't get saveAsPNG function.
I have tried with demo code as shown below.. It may be help you:

<html>
  <body>
        <canvas height="100" width="100" id="canvas"></canvas>
        <script language="javascript">
        var canvas=document.getElementById("canvas");
        var ctx = canvas.getContext("2d");
        ctx.beginPath();
        ctx.arc(75, 75, 10, 0, Math.PI*2, true); 
        ctx.closePath();
        ctx.fill();
        var img    = canvas.toDataURL("image/png");
        alert('Your image is :'+img);
        document.write('<br><br><br>Your image in canvas: <img src="'+img+'"/>');
        </script>
  </body>
</html>

riahc3 50 Â Team Colleague · Answer 6 · 2012-05-09T10:23:05+00:00

(The quoting system here is horrible)

Is this demo code from the library of canvas2image? I couldnt find it on the site.

riahc3 50 Â Team Colleague · Answer 7 · 2012-05-09T10:45:45+00:00

Putting

canvas.toDataURL("image/png");

in my code (with var canvas=document.getElementById("can"); before it) prints out the same thing. [object HTMLImageElement]

riahc3 50 Â Team Colleague · Answer 8 · 2012-05-09T10:49:46+00:00

I dont have to display it either; As long as I can get the string to put it in a

<img src

Im fine....

vibhaJ 126 Master Poster · Answer 9 · 2012-05-09T11:55:59+00:00

I ahve created demo code again :) Try now:

<html>
<header>
  <script src="http://www.nihilogic.dk/labs/canvas2image/canvas2image.js"></script>
  <script src="http://www.nihilogic.dk/labs/canvas2image/base64.js"></script>
</header>
<body>
<canvas width="200" height="200" style="border:1px solid black;" id="thecanvas"></canvas>
<input name="btn" value="Save in cookie" type="button" onClick="saveCookie();" >
<input name="btn" value="Show cookie" type="button"  onClick="showCookie();">
<input name="btn" value="Draw image from cookie" type="button"  onClick="drawImage();"> <br><br><br><br>
<img id="myImg"  src=""/>
<script language="javascript">


    var oCanvas = document.getElementById("thecanvas");
    var oCtx = oCanvas.getContext("2d");

    var iWidth = oCanvas.width;
    var iHeight = oCanvas.height;

    oCtx.fillStyle = "rgb(255,255,255)";
    oCtx.fillRect(0,0,iWidth,iHeight);

    oCtx.fillStyle = "rgb(255,0,0)";
    oCtx.fillRect(20,20,30,30);

    oCtx.fillStyle = "rgb(0,255,0)";
    oCtx.fillRect(60,60,30,30);

    oCtx.fillStyle = "rgb(0,0,255)";
    oCtx.fillRect(100,100,30,30);

    oCtx.beginPath();
    oCtx.strokeStyle = "rgb(255,0,255)";
    oCtx.strokeWidth = "4px";

    oCanvas.onmousedown = function(e) {
        bMouseIsDown = true;
        iLastX = e.clientX - oCanvas.offsetLeft + (window.pageXOffset||document.body.scrollLeft||document.documentElement.scrollLeft);
        iLastY = e.clientY - oCanvas.offsetTop + (window.pageYOffset||document.body.scrollTop||document.documentElement.scrollTop);
    }
    oCanvas.onmouseup = function() {
        bMouseIsDown = false;
        iLastX = -1;
        iLastY = -1;
    }
    oCanvas.onmousemove = function(e) {
        if (bMouseIsDown) {
            var iX = e.clientX - oCanvas.offsetLeft + (window.pageXOffset||document.body.scrollLeft||document.documentElement.scrollLeft);
            var iY = e.clientY - oCanvas.offsetTop + (window.pageYOffset||document.body.scrollTop||document.documentElement.scrollTop);
            oCtx.moveTo(iLastX, iLastY);
            oCtx.lineTo(iX, iY);
            oCtx.stroke();
            iLastX = iX;
            iLastY = iY;
        }
    }
    function setCookie(c_name,value,exdays)
    {
        var exdate=new Date();
        exdate.setDate(exdate.getDate() + exdays);
        var c_value=escape(value) + ((exdays==null) ? "" : "; expires="+exdate.toUTCString());
        document.cookie=c_name + "=" + c_value;
    }

    function getCookie(c_name)
    {
        var i,x,y,ARRcookies=document.cookie.split(";");
        for (i=0;i<ARRcookies.length;i++)
        {
          x=ARRcookies[i].substr(0,ARRcookies[i].indexOf("="));
          y=ARRcookies[i].substr(ARRcookies[i].indexOf("=")+1);
          x=x.replace(/^\s+|\s+$/g,"");
          if (x==c_name)
            {
            return unescape(y);
            }
          }
    }
    function saveCookie()
    {
       var strDataURI = oCanvas.toDataURL(); 
       setCookie("myImage",strDataURI,5);
    }
    function showCookie()
    {
      alert(getCookie('myImage'));
    }
    function drawImage()
    {
        document.getElementById('myImg').src = getCookie('myImage');
    }
    </script> 
</body>
</html>

vibhaJ 126 Master Poster · Answer 10 · 2012-05-09T12:03:03+00:00

If you don't want to save it in cookie, set image data in input type hidden.
When form is submitted you can save hidden data in database and further can use it.

riahc3 50 Â Team Colleague · Answer 11 · 2012-05-09T13:48:40+00:00

I ahve created demo code again :) Try now:

Thanks a lot for the code :) I really appritiate it :)

The problem is, i already have a canvas and I can already draw on it. What i simply want to do is make a "screenshot" of it and transport that screenshot else where. The "hidden form" from what is seems is what you are suggesting to do so I can transport it elsewhere right?

riahc3 50 Â Team Colleague · Answer 12 · 2012-05-09T13:50:24+00:00

document.getElementById('myImg').src = getCookie('myImage');

With that, there is a possibility I can store than in the cookie right?

vibhaJ 126 Master Poster · Answer 13 · 2012-05-09T13:51:37+00:00

Have you tried my last code?? It is storing and fetching from cookie only.

vibhaJ 126 Master Poster · Answer 14 · 2012-05-10T05:35:49+00:00

vibhaJ 126 Master Poster

11 Years Ago

Did it worked?? Make thread solved if it is..

riahc3 50 Â Team Colleague · Answer 15 · 2012-05-10T07:49:14+00:00

Did it worked?? Make thread solved if it is..

Im still not clear with your code as you are drawing and I can already draw.

None the less, Im trying with the second method you posted which is a hidden field. I can perfectly store the value in the value field of my hidden input box but when trying to access it via PHP via POST it is like it doesnt exist. I have some doubts of the reason why.

My code is basically:

<form id="imagen" method="post" name="imagen" action="#">
Con Corte - Añadir carro
<input id="imagen" type="hidden" value="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAYAAABw4pVUAAACIklEQVR4nO3bz4tNYRzH8fcY5MewENJQUoOyJEnKKKnZsaAsyGJK+AOsb1NYStn4kZLYkI2oWfnTjoWROUkzc+8553Oec9+v3V3c57xvzzl17r3fA5IkSZIkSZIkSZIkSZIkqWdGVIyogHlgFbgLnNjgXUeAG8APYFu7gdNjGVhatyGT2g08bGCdqfKWbs7omx0co1j3Y0e+xuOGrr5BeJMOYIXFtQ15l05JepkO+I9L6YCuzdH/O57ZdEBXPqYDtmguHdCmi+mAMe1JB7ThQDpAf51PBzRgRzpgciN+Duze/lY6YDLD2xCA5+mASRR+RqkU19MB47iaDmhZcbfCT9IBLTueDtC/9qUDVPcoHSD13u10gOoW0wEq1FI6QHWv0wEdOpkO2IxT6YAOLacDVFfMpMqudEBHVtMBm5Wft+rG93SA6or+02pYmhsA78zXdECrCtyQvk8oTqWD6YAWzacDxjHkL07v0wEaiE/pgBY8SAeorvhHFu6kAxo0pM+iPrmcDmjAvXRAk0qfZSpyjHQjp9MBqiv+7mSIjqYDtmh7OqBth9IBW7AzHdCVIqY1pkmff5pfSAdkjKhY6d045pd0QM6IirN8SGesmQH2piP6YobsQ6Kfg8futVngTIfH80fCTdoPXGhx/Vf8vio1hhcNrTMPPGtoLQGHgW9/XlRQVWw4gvMUuNJmlNas25AF4BxwLJwkSZIkSZIkSZIkSSrfL4jkPrc69QHbAAAAAElFTkSuQmCC" name="imagen">
</form>

Now, you may be wondering about my action; This already does link me (this code is actually inside a button with a onclick action that leads me somewhere else so like I mentioned it is not needed) to somewhere but in action I cant put a link because it is dynamically generated. Action AFAIK is mandatory so I just put that to try it to pass. For some reason in PHP (with a simply <?php echo $_POST[imagen]; ?> I cannot get it to show. It just shows up blank.

As you can see, in value the data is perfectly there but I cannot pass it to another page.

Thanks for all the help!

vibhaJ 126 Master Poster · Answer 16 · 2012-05-10T07:57:25+00:00

but in action I cant put a link because it is dynamically generated.

Your form name and hidden field name is same. i.e. imagen
name must be unique.
Can you try by changing both's name and id.

riahc3 50 Â Team Colleague · Answer 17 · 2012-05-10T08:42:45+00:00

I did it to make sure it passes...........

Ill try rename the input field then.

riahc3 50 Â Team Colleague · Answer 18 · 2012-05-10T08:46:58+00:00

riahc3 50 Â

11 Years Ago

Still nothing.......does not pass the value.

riahc3 50 Â Team Colleague · Answer 19 · 2012-05-10T08:52:19+00:00

New code:

<form id="imagen" method="post" name="imagen" action="#">
Con Corte - Añadir carro
<input id="imagenv" type="hidden" value="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAYAAABw4pVUAAACA0lEQVR4nO3cwUsUYRzG8UdhKa0oEREpCjoUSOlJgiAWIbp26FZQt+iS2CH0ImwGXj2IWiePhnSo6L5/2nQoqFmVRvd93+edfb+f8/B7vzDsLDvzzkoAAAAAAAAAAAAAAAAAAPxrU11tquvOwG8P1VOlnipJHyR9dAeV6rDBMfvRKyBJmjzj8QdRKjC0BXfAqOkEmLERYAYkvQ0466KksYDzinMn0tzxSHMxhNvugLbZSbBGrE8ghjDnDmiDp+4AAANm3QG5emNc+7NxbZzinjsgJ4vuANS9cAf88dwdgONuuQPcrrkDBhR/E3LFHXCCLXcAICnvy4Pzd5FNjperos27A/7jujsAdQ/cASjYd3dAQ8vugFTuugMaeuUOQIFCbIBL4+/G7pH2zh3QWCEn5LE74Ix23QGo++QOQN2qOyCml+6Ac3jtDoijvV+Q6+6AONp7Qr64A2KacgecQ8h3VbJzwR0AAKNrzx2Aupw3YhSn+F2MubnpDkhhwh3Q0CV3QCpt2VpzxR2QypI7oIFtd0BKI30ru41+uANQl/O1Obd3VYp2wx2AnvrqqS/pqjvF7Zs7QFKbH5gFl8P/Vh25A3LzyLRuRzwky8aaOyBrlVRVSnIN/5pgjfaLfEI6kp5Eml2EZwFmTIs7AcG9lzTT8NjLkn5Kuh8vBwAAAAAAAACAJn4Bse83Wq3XeMoAAAAASUVORK5CYII=" name="imagenv">
</form>

On the PHP page (which when I click on that link it leads me to there) I do this:

<?php echo $_POST["imagenv"]; ?>

vibhaJ 126 Master Poster · Answer 20 · 2012-05-10T09:24:26+00:00

Your code works for me.
Where is submit button?
Are you using javascript for rediretion?

riahc3 50 Â Team Colleague · Answer 21 · 2012-05-10T10:28:20+00:00

Your code works for me.
Where is submit button?
Are you using javascript for rediretion?

Didnt see page 2 :P

This is the entire code

<button id="botonCarrito2" class="button btn-cart" onclick="mandarAlCarro('http://localhost.dev/store/checkout/cart/add/uenc/aHR0cDovL21ldHJvbmljcy5kZXYvcGFzdGVsZXJpYXRvbG9zYW5hL3Bhc3RlbGVzLWRlLWNvcnRlLmh0bWw,/product/2/', 2, 2)" title="Añadir al carrito" type="button">
<span>
<span>
<form id="imagen" method="post" name="imagen" action="#">
Con Corte - Añadir carro
<input id="imagenv" type="hidden" value="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAYAAABw4pVUAAACTklEQVR4nO3cPYsTQQDG8ecih3iK71eIimhxIuphoYU2XmGrhdrYio2CWIkYrlhOO8HGQg4VPBDf7kNc7adaiwgm7sZkczPzzGb/vzaw8ydDstnNzEoAAAAAAAAAAAAAAAAI5oWkx5LOjXm9J2lF0lNJm6miuuZ7oON8lXQg0LE6plCpvn5FHKGvDd1UoTLiGHPjowqVKrQTdZS/E/Ig6jgtt2wc+5tx7OzsdQcMWXcHuB10B9ToSTrhjnDY4w6YYMMdkNqCO2AKC5KOuSNSOOsOaOiDOyCmtv6ieeQOiCH388YkJ90BoZ13BwSw3x0QylF3QEA5XTvNbN4+7ofcAbuxzx0QyWV3wKzeuQMieusOQNUbdwCqjrgDptXWC8FmCu205U+vi+6AJFo0IV1z2x0AZO+eO6De4Hs17oKFfJ1xB1QNVpBwosvMaXeA0Xt3QJ3P7gBgWJb38XruAIy67g4w23IH1OnyyR0ZWnEH1LnrDjC64Q4Y56c7AFVZnuQSeOkO+J8f7gCDS+6ASTq/HyNHx90BiR12B0zrqjsgkb47oInn7oAEnrgDZpHlRVTX3XcHoN5rdwCqFiWdckeg6oravwtrLq13fEVLhtq7omXJHYBR2+4AjHI+ZCeZO+4AVH1xB0zhkzsgtVfugLFSPJgtU2vugFodnhBJuuUO+Mc1d0AOHroD/rjgDsiJc/V5T+14JlhyS0r/xnRj5/EubZVSWSrq7RYmoomhCVkMeNhVsfM2mGdqfpW/rMGjyzPcQwgAAAAAAAAAAACg/X4DEkhHs9fYkWsAAAAASUVORK5CYII=" name="imagenv">
</form>
</span>
</span>
</button>

That is the button :) As you can see the redirection is indeed via Javascript and that long URL is dynamically generated so I cant just make a submit button and point it there.

vibhaJ 126 Master Poster · Answer 22 · 2012-05-10T10:49:38+00:00

My dear you are just changing window url using onclick. In this case form data will not be available to you in next page.

You need to submit form data using submit button, then only you can get hidden variable via post.

<? echo $_POST['imagenv'];?>
<form id="imagen" method="post" name="imagen" action="#">
Con Corte - Añadir carro
<input id="imagenv" type="hidden" value="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAYAAABw4pVUAAACA0lEQVR4nO3cwUsUYRzG8UdhKa0oEREpCjoUSOlJgiAWIbp26FZQt+iS2CH0ImwGXj2IWiePhnSo6L5/2nQoqFmVRvd93+edfb+f8/B7vzDsLDvzzkoAAAAAAAAAAAAAAAAAAPxrU11tquvOwG8P1VOlnipJHyR9dAeV6rDBMfvRKyBJmjzj8QdRKjC0BXfAqOkEmLERYAYkvQ0466KksYDzinMn0tzxSHMxhNvugLbZSbBGrE8ghjDnDmiDp+4AAANm3QG5emNc+7NxbZzinjsgJ4vuANS9cAf88dwdgONuuQPcrrkDBhR/E3LFHXCCLXcAICnvy4Pzd5FNjperos27A/7jujsAdQ/cASjYd3dAQ8vugFTuugMaeuUOQIFCbIBL4+/G7pH2zh3QWCEn5LE74Ix23QGo++QOQN2qOyCml+6Ac3jtDoijvV+Q6+6AONp7Qr64A2KacgecQ8h3VbJzwR0AAKNrzx2Aupw3YhSn+F2MubnpDkhhwh3Q0CV3QCpt2VpzxR2QypI7oIFtd0BKI30ru41+uANQl/O1Obd3VYp2wx2AnvrqqS/pqjvF7Zs7QFKbH5gFl8P/Vh25A3LzyLRuRzwky8aaOyBrlVRVSnIN/5pgjfaLfEI6kp5Eml2EZwFmTIs7AcG9lzTT8NjLkn5Kuh8vBwAAAAAAAACAJn4Bse83Wq3XeMoAAAAASUVORK5CYII=" name="imagenv">
<input name="submit" value="submit" type="submit" />
</form>

Why are you using onclick and not using submit button?

riahc3 50 Â Team Colleague · Answer 23 · 2012-05-10T11:26:24+00:00

Like I commented, the onClick is not generated by me but by the instalation (this is Magento BTW).

Now, would something like this work:

<input name="submit" value="submit" type="submit" style="display:none">Con Corte - Añadir carro</input>

riahc3 50 Â Team Colleague · Answer 24 · 2012-05-10T11:26:30+00:00

riahc3 50 Â

11 Years Ago

?

riahc3 50 Â Team Colleague · Answer 25 · 2012-05-10T11:27:29+00:00

Also, I generate the form via Javascript so sadly I cant do document.forms.submit() (or however the function is)

riahc3 50 Â Team Colleague · Answer 26 · 2012-05-10T11:42:15+00:00

Going to lunch. Be back in 2 hours.

Thanks for all the help! :)

riahc3 50 Â Team Colleague · Answer 27 · 2012-05-10T13:25:08+00:00

Back.......

Im trying to see if I can change that button to a submit and have it all still work. It should.

riahc3 50 Â Team Colleague · Answer 28 · 2012-05-10T15:17:10+00:00

Almost got it :)

Now, I just need to go to its original link instead of "#"

How can I do this?

riahc3 50 Â Team Colleague · Answer 29 · 2012-05-10T15:36:53+00:00

I used for action

javascript:void(0)

and it went to the link. But now the post (data) doesnt get thru....

Display the picture in [object HTMLImageElement] using PHP

Recommended Answers Collapse Answers

All 69 Replies

Recommended Answers