Display the picture in [object HTMLImageElement] using PHP

Team Colleague

1,282 posts since May 2008

Reputation Points: 62

Solved Threads: 13

Skill Endorsements: 11

0

post your code.

Posting Shark

958 posts since Apr 2010

Reputation Points: 161

Solved Threads: 190

Skill Endorsements: 3

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.

Team Colleague

1,282 posts since May 2008

Reputation Points: 62

Solved Threads: 13

Skill Endorsements: 11

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

Team Colleague

1,282 posts since May 2008

Reputation Points: 62

Solved Threads: 13

Skill Endorsements: 11

0

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

Team Colleague

1,282 posts since May 2008

Reputation Points: 62

Solved Threads: 13

Skill Endorsements: 11

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>

Posting Shark

958 posts since Apr 2010

Reputation Points: 161

Solved Threads: 190

Skill Endorsements: 3

0

(The quoting system here is horrible)

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

Team Colleague

1,282 posts since May 2008

Reputation Points: 62

Solved Threads: 13

Skill Endorsements: 11

0

Putting

canvas.toDataURL("image/png");

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

Team Colleague

1,282 posts since May 2008

Reputation Points: 62

Solved Threads: 13

Skill Endorsements: 11

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

Team Colleague

1,282 posts since May 2008

Reputation Points: 62

Solved Threads: 13

Skill Endorsements: 11

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>

Posting Shark

958 posts since Apr 2010

Reputation Points: 161

Solved Threads: 190

Skill Endorsements: 3

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.

Posting Shark

958 posts since Apr 2010

Reputation Points: 161

Solved Threads: 190

Skill Endorsements: 3

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?

Team Colleague

1,282 posts since May 2008

Reputation Points: 62

Solved Threads: 13

Skill Endorsements: 11

0

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

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

Team Colleague

1,282 posts since May 2008

Reputation Points: 62

Solved Threads: 13

Skill Endorsements: 11

0

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

Posting Shark

958 posts since Apr 2010

Reputation Points: 161

Solved Threads: 190

Skill Endorsements: 3

0

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

Posting Shark

958 posts since Apr 2010

Reputation Points: 161

Solved Threads: 190

Skill Endorsements: 3

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!

Team Colleague

1,282 posts since May 2008

Reputation Points: 62

Solved Threads: 13

Skill Endorsements: 11

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.

Posting Shark

958 posts since Apr 2010

Reputation Points: 161

Solved Threads: 190

Skill Endorsements: 3

0

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

Ill try rename the input field then.

Team Colleague

1,282 posts since May 2008

Reputation Points: 62

Solved Threads: 13

Skill Endorsements: 11

0

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

Team Colleague

1,282 posts since May 2008

Reputation Points: 62

Solved Threads: 13

Skill Endorsements: 11

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