HTML Canvas 图像转 Base64 问题

发布于 2024-11-30 00:53:40 字数 1324 浏览 1 评论 0原文

我在检索画布上显示的图像的 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/< /a> 谢谢，Mrchief

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

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

我已经在 chrome 和 chrome 上测试过它火狐浏览器

非常感谢..

原文

I'm having a problem with retrieving the base64 version of an image displayed on a canvas. I've looked at the other questions but none of the solutions including canvas2image seem to work.

Here's my code:

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

Here's the test link: http://jsfiddle.net/mrchief/hgTdM/1/ thanks, Mrchief

What I need is the correct base64 output of the image in the canvas.

The problem is that it won't output the correct base64 version of the image.. But as you can see, the image inside the canvas is displayed without any problems.

I've tested it on chrome & firefox

Thanks very much..

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

小草泠泠 2024-12-07 00:53:40

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

忽略 onclick，下面是在图像加载并以旋转方式绘制到画布后写出数据 url 的内容：

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

请注意您加载的图像必须位于与您的脚本相同的域，否则您将无法创建数据 URL。

Your document.write() call occurs immediately upon page load, before your img is loaded and drawn and before your onclick handler can ever run. You need to wait to generate the data URI until after everything has finished happening to the canvas.

Ignoring the onclick, here's something that writes out the data url after the image has loaded and been drawn to the canvas in a rotated fashion:

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

You can see this demo in action here: http://phrogz.net/tmp/upside-down-image-url.html

Note that the image you load must be on the same domain as your script, or else you will not be allowed to create the data URL.

回复收藏 0 原文

~没有更多了~