1

Подскажите пожалуйста, почему когда мы используем функцию Canvas.toDataURL(); и отрисовываем на холсте простые фигуры, типа кривых Безье. Я получаю рабочую ссылку в формате base 64.

<canvas id="myCanvas" width="578" height="200" style="display:none;"></canvas>
<img id="canvasImg" alt="Right click to save me!">
<script>
  var canvas = document.getElementById('myCanvas');
  var context = canvas.getContext('2d');

  // draw cloud
  context.beginPath();
  context.moveTo(170, 80);
  context.bezierCurveTo(130, 100, 130, 150, 230, 150);
  context.bezierCurveTo(250, 180, 320, 180, 340, 150);
  context.bezierCurveTo(420, 150, 420, 120, 390, 100);
  context.bezierCurveTo(430, 40, 370, 30, 340, 50);
  context.bezierCurveTo(320, 5, 250, 20, 250, 50);
  context.bezierCurveTo(200, 5, 150, 20, 170, 80);
  context.closePath();
  context.lineWidth = 5;
  context.fillStyle = '#8ED6FF';
  context.fill();
  context.strokeStyle = '#0000ff';
  context.stroke();

  // save canvas image as data url (png format by default)
  var dataURL = canvas.toDataURL();

  // set canvasImg image src to dataURL
  // so it can be saved as an image
  document.getElementById('canvasImg').src = dataURL;

</script>

Но как только пытаюсь загрузить картинку открывается белый экран. И base64 url не меняется при смене разных картинок. Он меняется, только в случае изменения ширины и высоты элемента canvas. Что наводит на мысль, что картинка просто не отрисовывается на холсте, хотя в браузере она видна. Как быть?

<a id="img"><p>Download</p></a>
 <canvas id="can" width="600" height="300"></canvas>
    <script>    
        var example = document.getElementById('can');
        ctx = example.getContext('2d'); 
        pic = new Image();             

        pic.onload = function() 
        {    
            ctx.drawImage(pic, 0, 0); 
        }
        pic.src = '1.jpg';
        var canvas = document.getElementById('can');
        var dataURL = canvas.toDataURL("image/png");
        document.getElementById('img').href = dataURL;
        document.write(dataURL);

  </script> 

Скажите, может я неправильно отрисовываю картинку на холсте. И если таким способом получить ссылку на картинку нельзя, подскажите действенный способ, любой подойдет, даже самый медленный и громоздкий.

1 ответ 1

1

Во-первых, потому что операция асинхронная, а ты белый холст экспортируешь.

Надо так:

var example = document.getElementById('can');
ctx = example.getContext('2d'); 
pic = new Image();             
pic.onload = function() 
{    
    ctx.drawImage(pic, 0, 0); 
    var canvas = document.getElementById('can');
    var dataURL = canvas.toDataURL("image/png");
    document.getElementById('img').href = dataURL;
}
pic.src = "https://www.google.ru/images/srpr/logo11w.png";

Uncaught SecurityError: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported.

Думаю, этого не будет, если картинка будет грузиться с твоего же сайта.

Но всё равно есть проблемка. У data uri есть ограничение длины.

3
  • Это гениально :D, работает, спустя 13 часов я подобрался к ответу. Спасибо! Все было так просто
    – KiZZek
    25 мая 2015 в 17:22
  • На счет ограничения длинны, можно ли делить большое изображение на 4 части, получать 4 разных data url? А потом собирать с помощью php или js, вопрос только как?
    – KiZZek
    25 мая 2015 в 17:32
  • @KiZZek, было что-то про blob uri, но я не помню. Думаю, стоит в том направлении покапать.
    – Qwertiy
    25 мая 2015 в 18:08

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.