0

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

5
Contributors
69
Replies
71
Views
5 Years
Discussion Span
Last Post by riahc3
0

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.

0

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

0

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>
0

(The quoting system here is horrible)

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

0

Putting

canvas.toDataURL("image/png");

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

0

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

<img src

Im fine....

0

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>
0

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.

0

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?

0

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

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

0

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!

0

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.

0

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

Ill try rename the input field then.

0

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"]; ?>
0

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

0

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.

Edited by riahc3

0

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?

0

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>

0

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

0

Going to lunch. Be back in 2 hours.

Thanks for all the help! :)

0

Back.......

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

0

Almost got it :)

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

How can I do this?

0

I used for action

javascript:void(0)

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

This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.