1 Вопрос: Как заполнить холст и добавить текст

вопрос создан в Thu, May 2, 2019 12:00 AM

Я хочу заполнить свой холст изображением (base64-string) и затем добавить текст в холст.

Исходная идея (приложение браузера javascript): я хочу установить base64-строку txtb64 (изображение) в качестве фонового изображения холста и затем добавить текст поверх него.

downloadtext: function() {
  var sign = this.getView().byId("SigId");
  var txtb64 = signpad.getSignAsJpeg();

  var canvas = document.createElement("canvas");
  var ctx = canvas.getContext('2d');
  var image = new Image();
  image.src = txtb64;
  image.addEventListener("load", function(event) {
    console.log("Ready!");
  });

  ctx.drawImage(image, 0, 0);

  ctx.fillText('My random text', 0, 0);

  var dataURL = canvas.toDataURL("image/jpeg");

  var image = new Image();
  var element = document.createElement('a');

  image.src = dataURL;

  element.setAttribute('href', image.src);
  element.setAttribute('download', 'image');
  element.style.display = 'none';

  element.click();
},

Проблема в том, что я всегда получаю черный прямоугольник в качестве вывода. Что не так с моим кодом, потому что я не вижу ошибки.

    
2
  1. getSignAsJpeg возвращает данные, начинающиеся с data:image/[jpeg];base64,, или это просто данные base64?
    2019-05-02 15: 17: 59Z
  2. Возвращаемые данные начинаются с data:image/[jpeg];base64,
    2019-05-03 05: 49: 59Z
  3. Что произойдет, если вы поместите все ниже объявления обработчика события load в функцию обработчика события?
    2019-05-03 08: 03: 09Z
  4. Похоже, что есть проблема с данными, поступающими с getSignAsJpeg. Что произойдет, если вы используете известный хороший jpeg, т.е. image.src=[path to jpeg]?
    2019-05-03 08: 45: 26Z
  5. Итак, с известным хорошим jpeg вы не получите Uncaught TypeError?
    2019-05-03 08: 59: 10Z
1 ответ                              1                         

Похоже, вы должны поместить код, необходимый для загрузки нового изображения, в обработчик событий «load» создаваемого вами изображения. Это необходимо, потому что событие load может сработать после запуска кода под ним, в результате чего на холст будет помещено пустое изображение.

Также вы объявляете var image = new Image(); дважды, что также может вызывать проблемы. Вызов одного image1, а другого image2 предотвратит это.

ПРЕДУПРЕЖДЕНИЕ . Запуск этого фрагмента вызывает запрос на загрузку.

р>

var data = "data:image/png;base64,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";

var can = document.getElementById('can');
var ctx = can.getContext('2d');
var img = new Image();

img.src = data;

img.addEventListener('load', e =>
{
  ctx.drawImage(img, 0, 0);
  
  ctx.fillText('My random text', 100, 100);
  
  var dataURL = can.toDataURL("image/jpeg");

  var image = new Image();
  var element = document.createElement('a');

  image.src = dataURL;
  
  element.setAttribute('href', image.src);
  element.setAttribute('download', 'image');
  
  document.body.appendChild(element);
  
  element.click();
});
<canvas width="300" height="300" id="can"></canvas>
    
2
2019-05-03 12: 14: 35Z
  1. Спасибо! Это работает!
    2019-05-03 12: 19: 46Z
источник размещен Вот