HTML Canvas image to Base64 problem

Question

Aug 17, 2011, 10:57 PM

HTML Canvas image to Base64 problem

Tengo un problema al recuperar la versión base64 de una imagen que se muestra en un lienzo. He examinado las otras preguntas, pero ninguna de las soluciones, incluida canvas2image, parece funcionar.

Aquí está mi código:

<!DOCTYPE>
<html>
<head>
  <style>#canvas {cursor: pointer;}</style>
</head>
<body>
    <canvas id="canvas"></canvas>

    <script type="text/javascript">

        var can = document.getElementById('canvas');
        var ctx = can.getContext('2d');

        var img = new Image();
        img.onload = function(){
            can.width = img.width;
            can.height = img.height;
            ctx.drawImage(img, 0, 0, img.width, img.height);
        }
        img.src = 'http://sstatic.net/stackoverflow/img/newsletter-ad.png';

        can.onclick = function() {
            ctx.translate(img.width-1, img.height-1);
            ctx.rotate(Math.PI);
            ctx.drawImage(img, 0, 0, img.width, img.height);
        };

   document.write(can.toDataURL()); //isn't writing the correct base64 image


    </script>
</body>
</html>

Aquí está el enlace de prueba:http: //jsfiddle.net/mrchief/hgTdM/1 gracias, Mrchief

o que necesito es la salida base64 correcta de la imagen en el lienzo.

El problema es que no generará la versión base64 correcta de la imagen ... Pero como puede ver, la imagen dentro del lienzo se muestra sin ningún problema.

Lo he probado en Chrome y Firefox

Muchas gracias.