负载图像织物画布背景(load image to fabric canvas background)

您好即时通讯试图上传的图片，并把它作为画布背景。 代码片段：

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]); 
}

问题是，不显示背景画布。 我可以看到镀铬devtools画布背景SRC。 背景实际上已设置但不知何故，它不显示。

Answer 1:

这似乎很奇怪混乱。 如果你想在一个HTMLCanvasElement背景图像，为什么不设置通过CSS背景图像？

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

也可以设置通过JavaScript的CSS：

canvas.style.backgroundImage = 'url(http://placekitten.com/100/100)';

Answer 2:

试试下面的代码：

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]);

文章来源: load image to fabric canvas background