Question

我在检索画布上显示的图像的base64版本时遇到问题。我看了其他问题，但没有一个解决方案，包括canvas2image似乎都有用。

这是我的代码：

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

以下是测试链接：http://jsfiddle.net/mrchief/hgTdM/1/谢谢，Mrchief

我需要的是画布中图像的正确base64输出。

问题是它不会输出正确的base64版本的图像..但正如你所看到的，画布内的图像显示没有任何问题。

我在chrome＆amp; amp;火狐

非常感谢..

Answer 1

您的document.write()调用会在页面加载后立即发生，在加载和绘制img之前以及onclick处理程序运行之前。您需要等待生成数据URI，直到所有内容都完成到画布后。

忽略onclick，这是在图像加载并以旋转方式绘制到画布后写出数据网址的东西：

<!DOCTYPE html>
<html><head>
  <title>Rotated Image Data URL</title>
  <style type="text/css" media="screen">
    canvas, textarea { display:block }
  </style>
</head><body>
  <canvas id="canvas"></canvas>
  <textarea id="data" rows="20" cols="80"></textarea>
  <img id="echo"> 
  <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.translate(img.width-1, img.height-1);
        ctx.rotate(Math.PI);
        ctx.drawImage(img, 0, 0, img.width, img.height);
        var url = document.getElementById('data').value = can.toDataURL();
        document.getElementById('echo').src = url;
      }
      img.src = 'gkhead.jpg';
  </script>
</body></html>

您可以在此处查看此演示：http://phrogz.net/tmp/upside-down-image-url.html

请注意，您加载的图片必须与脚本位于同一个域中，否则您将无法创建数据网址。

HTML Canvas图像到Base64问题

1 个答案: