HTML5 Подождите, пока загрузится холст, затем найдите base64

Question

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

function make_base(bg_img, width, height)
{
return new Promise(function(resolve, reject) {
  base_image = new Image();
  base_image.src = bg_img;
  base_image.onload = function(){
  ctx.drawImage(base_image, 0, 0, width, height);
  resolve()
  }
  })
}

function loadCanvas(width, height) {
    canvas = document.getElementById('canvas');
    canvas.id = "canvas";
    canvas.width = width;
    canvas.height = height;
    ctx = canvas.getContext("2d");
    canvas.style.zIndex   = 8;
    setTimeout(function() {
    base64 = canvas.toDataURL("image/jpeg",1);
    console.log(base64);
}, 3500);
}

function fillText(name, x_name, y_name, name_color, name_font) {
ctx.fillStyle = name_color;
ctx.font = name_font;
ctx.fillText(name, x_name, y_name);
}

Здесь Canvas несколько раз загружается. Поскольку я установил 3,5 секунды для base64 Url, иногда содержимое холста не загружается, но я получаю пустое base64.

function work() {
loadCanvas(x,y)
make_base(xxxxx).then(function () {
fillText(abcd)
})
}

Как мне ждать base64, пока не загрузится полный холст.

Answer 1

Просто переместите часть экспорта в другую функцию, которую вы будете вызывать в конце цепочки Promise:

var canvas, ctx;

work()
.then(function (url) {
  var img = new Image();
  img.src = url;
  document.body.appendChild(img);
}).catch(console.error);


function export_canvas() {
  base64 = canvas.toDataURL("image/jpeg", 1);
  console.log(base64);
  return base64;
}

function make_base(bg_img, width, height) {
  return new Promise(function (resolve, reject) {
    base_image = new Image();
    base_image.crossOrigin = "anonymous";
    base_image.src = bg_img;
    base_image.onload = function () {
      ctx.drawImage(base_image, 0, 0, width, height);
      resolve();
    }
  });
}

function setupCanvas(width, height) {
  canvas = document.getElementById("canvas");
  canvas.id = "canvas";
  canvas.width = width;
  canvas.height = height;
  ctx = canvas.getContext("2d");
  canvas.style.zIndex = 8;
}

function fillText(name, x_name, y_name, name_color, name_font) {
  ctx.fillStyle = name_color;
  ctx.font = name_font;
  ctx.fillText(name, x_name, y_name);
}

function work() {
  setupCanvas(80, 40);
  return make_base("https://upload.wikimedia.org/wikipedia/commons/4/47/PNG_transparency_demonstration_1.png", 40, 40)
  .then(function () {
    fillText("abcd", 40, 10, "red");
    // ready to export
    return export_canvas();
  });
}

<canvas id="canvas">

Answer 2

Понятия не имею, что происходит, но это МОЖЕТ быть решением вашей проблемы.

Когда вы получаете строку base64, вы говорите, что иногда пусто . Хорошо. Отложите эту строку в сторону (в BASE64_NOT_READY) и используйте ее, чтобы различить готов и не готов , например:

var interval = setInterval(function () {
  base64 = canvas.toDataURL("image/jpeg", 1);

  if (base64 !== BASE64_NOT_READY)
  {
    // ready, break interval and proceed
    clearInterval(interval);
    console.log(base64);
  }
}, 100); // check every 100 ms, actual time depends on way too many factors

Вам нужно определить строку:

var BASE64_NOT_READY = "???";

Вы можете определить это, используя свой собственный код. Замените ???, и вы должны быть золотыми!