Блог

Мне трудно понять функцию toBlob canvas. На моей странице у меня есть <img id="img"/> и дальше у меня есть скрипт, который я пытаюсь заполнить его изображением.

Что я делаю не так? Кажется, что оно заполняет src изображение, но оно полностью прозрачно вместо ожидаемого синего квадрата.

 var c = document.createElement("canvas");
c.width = 128, c.height = 128;
var ctx = c.getContext("2d", {alpha:false});
function generate(hex){
    return function(b){
        ctx.fillStyle = hex;
        ctx.fillRect(0, 0, 128, 128);
        document.getElementById("img").src = URL.createObjectURL(b);
        }
    }
c.toBlob(generate("#abcdef"));
  

HTMLCanvasElement.toBlob(callback) Метод сгенерирует большой двоичный объект, содержащий изображение, представляющее состояние холста на момент вызова этого метода.
Затем, асинхронно, он вызовет переданный обратный вызов с результирующим большим двоичным объектом в качестве единственного параметра.

В вашем коде, когда вы вызываете toBlob() , на вашем холсте еще ничего не нарисовано, поэтому результирующий большой двоичный объект будет содержать прозрачное изображение.
Вы будете рисовать на холсте только после создания этого большого двоичного объекта, но это изменение не будет отражено в уже сгенерированном изображении.

Поэтому вместо этого сделайте

 var c = document.createElement("canvas");
c.width = 128, c.height = 128;
var ctx = c.getContext("2d", {alpha:false});
function generate(hex){
  // draw before toBlob is called
  ctx.fillStyle = hex;
  ctx.fillRect(0, 0, 128, 128);
  // following callback will get executed after the image is generated
  return function(b){
    document.getElementById("img").src = URL.createObjectURL(b);
  };
}
c.toBlob(generate("#abcdef"));  

 <img id="img">