将图像加载到织物画布背景答案

【问题标题】：load image to fabric canvas background将图像加载到织物画布背景
【发布时间】：2012-07-12 06:17:26
【问题描述】：

您好，我正在尝试上传图像并将其作为画布背景。代码sn-p：

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

问题是画布没有显示背景。我可以在 chrome devtools 中看到画布背景 src。背景实际上已设置，但不知何故未显示。

【问题讨论】：

标签： javascript canvas html5-canvas filereader fabricjs

【解决方案1】：

这似乎令人困惑。如果您想要 HTMLCanvasElement 上的背景图片，为什么不直接通过 CSS 设置背景图片？

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

或者通过 JavaScript 设置 CSS：

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

【讨论】：

因为我是从客户端通过文件 api(filereader) 加载这张图片的。
解决了这个问题，只是做了img.onload事件下的所有画布分配。

【解决方案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]);

【讨论】：