загрузить изображение на тканевый фон холста

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

function handleMenuImage(e){
    var reader = new FileReader();
    reader.onload = function(event){
        var img = new Image();
        img.src = event.target.result;
        canvas.setWidth(img.width);
        canvas.setHeight(img.height);
        canvas.setBackgroundImage(img.src, canvas.renderAll.bind(canvas));

        //set the page background
        menuPages[currentPage].pageBackground.src = img.src;
        canvas.backgroundImageStretch = false;

    }
    reader.readAsDataURL(e.target.files[0]); 
}

проблема в том, что холст не показывает фон. я вижу фон холста src в chrome devtools. фон на самом деле был установлен, но почему-то не отображается.


javascript canvas html5-canvas filereader fabricjs
person Evgeni Roitburg    schedule 12.07.2012    source источник

Ответы (2)


arrow_upward
2
arrow_downward

Это кажется странно запутанным. Если вам нужно фоновое изображение в HTMLCanvasElement, почему бы просто не установить фоновое изображение с помощью CSS?

#myCanvas {
  background-image: url(http://placekitten.com/100/100);
}

Или установите CSS через JavaScript:

canvas.style.backgroundImage = 'url(http://placekitten.com/100/100)';
person Simon Sarris    schedule 12.07.2012
comment
потому что я загружаю это изображение через файл api (filereader) с клиентской машины. - person Evgeni Roitburg; 12.07.2012
comment
решил проблему, просто выполнил все назначения холста в событии img.onload. - person Evgeni Roitburg; 17.07.2012

arrow_upward
1
arrow_downward

Попробуйте следующий код:

var raw_reader = new FileReader();
raw_reader.onload = function (event){
  var reader = new FileReader();
  reader.onload = function(event){
    var img = new Image();
    img.src = event.target.result;
    canvas.setWidth(img.width);
    canvas.setHeight(img.height);
    canvas.setBackgroundImage(img.src, canvas.renderAll.bind(canvas));

    //set the page background
    menuPages[currentPage].pageBackground.src = img.src;
    canvas.backgroundImageStretch = false;

  }
  reader.readAsDataURL(e.target.files[0]); 
}
raw_reader.readAsBinaryString(e.target.files[0]);
person bearxy39    schedule 21.06.2013