使用 Fabric JS 来自本地主机的画布 setBackgroundImage答案

【问题标题】：Canvas setBackgroundImage from localhost using Fabric JS使用 Fabric JS 来自本地主机的画布 setBackgroundImage
【发布时间】：2019-03-07 12:51:09
【问题描述】：

我正在尝试使用输入元素来加载图像并希望将其设置为画布的背景图像。我正在使用 Fabric JS。

以下是我尝试过的

$(function(){
    var canvas = new fabric.Canvas('canvas');
   $('#importimage').on('change', function(e){
    //method 1
    imageUrl = $(this).val();
    imageUrl = petUtil.getImage(imageUrl);
    _canvas = canvas;
    fabric.Image.fromURL(imageUrl , function(image)
    {
        image.set({ left:left , top:top , angle:angle , cornersize:10 });

        top_shiv = $('.upper-canvas').attr('height');
        left_shiv = $('.upper-canvas').attr('width');
        top= top_shiv/5;
        left= _canvasWidth/4;

        image.set({left:left , top:top , 
        width:window.newwidth,height:window.newheight });                           
        image.scale(scale).setCoords();
        _canvas.add(image);
        _canvas.setWidth(window.newwidth);
        _canvas.setHeight(window.newheight);    

        _canvas.renderAll();    
    }, {  crossOrigin: 'Anonymous' });




   //method 2
   var file = e.target.files[0];
   alert(file);
   var reader = new FileReader();
   reader.onload = function(f) {
      var data = f.target.result;
      fabric.Image.fromURL(data, function(img) {
            canvas.setHeight(100);
            canvas.setWidth(100);
            canvas.setBackgroundImage(img, canvas.renderAll.bind(canvas));
      });
   };
});
});

这两种方法都不起作用 jsfiddle https://jsfiddle.net/upatg6ge/12/

【问题讨论】：

Add background image with fabric.js的可能重复
答案代码已包含在我的代码中，但仍然无法正常工作......
你能做一个小提琴/sn-p吗？您使用的是哪个版本？
没有像 window.newheight 和 window.newwidth 这样的属性，或者您手动设置它，否则它将是 undefined？
@Durga 删除后我试过了，但还是不行，这里是小提琴jsfiddle.net/upatg6ge/9

标签： canvas fabricjs

【解决方案1】：

只需在 reader.onload 回调下方添加一行，如下所示：

var file = e.target.files[0];
alert(file);
var reader = new FileReader();
reader.onload = function(f) {
  var data = f.target.result;
  fabric.Image.fromURL(data, function(img) {
        canvas.setHeight(100);
        canvas.setWidth(100);
        canvas.setBackgroundImage(img, canvas.renderAll.bind(canvas));
  });
};
// newly added line :
reader.readAsDataURL(file);

【讨论】：