首页 / JAVASCRIPT / javascript – HTML Canvas图像到Base64问题

javascript – HTML Canvas图像到Base64问题

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了javascript – HTML Canvas图像到Base64问题，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含2094字，纯文字阅读大概需要3分钟。

内容图文

我在检索画布上显示的图像的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;测试了它火狐

非常感谢..

解决方法:

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

内容总结

以上是互联网集市为您收集整理的javascript – HTML Canvas图像到Base64问题全部内容，希望文章能够帮你解决javascript – HTML Canvas图像到Base64问题所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/706490.html

来源：【匿名】