HTML изображение Canvas для проблемы Base64 - PullRequest
Новая
       10

HTML изображение Canvas для проблемы Base64

2 голосов
/ 18 августа 2011

У меня проблема с получением версии 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 & Firefox

Большое спасибо ..

1 Ответ

2 голосов
/ 18 августа 2011

Ваш 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 данных.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...