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
riahc3 50 Â Team Colleague
vibhaJ 126 Master Poster
post your code.
riahc3 50 Â Team Colleague
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
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
vibhaJ 126 Master Poster
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
(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
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
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
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
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
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
document.getElementById('myImg').src = getCookie('myImage');
With that, there is a possibility I can store than in the cookie right?
vibhaJ 126 Master Poster
Have you tried my last code?? It is storing and fetching from cookie only.
vibhaJ 126 Master Poster
Did it worked?? Make thread solved if it is..
riahc3 50 Â Team Colleague
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
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
I did it to make sure it passes...........
Ill try rename the input field then.
riahc3 50 Â Team Colleague
Still nothing.......does not pass the value.
riahc3 50 Â Team Colleague
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
Your code works for me.
Where is submit button?
Are you using javascript for rediretion?
riahc3 50 Â Team Colleague
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
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
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
?
riahc3 50 Â Team Colleague
Also, I generate the form via Javascript so sadly I cant do document.forms.submit() (or however the function is)
riahc3 50 Â Team Colleague
Going to lunch. Be back in 2 hours.
Thanks for all the help! :)
riahc3 50 Â Team Colleague
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
Almost got it :)
Now, I just need to go to its original link instead of "#"
How can I do this?
riahc3 50 Â Team Colleague
I used for action
javascript:void(0)
and it went to the link. But now the post (data) doesnt get thru....
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.