使用Fabric JS使背景图像适合画布大小

Question

我正在尝试拉伸背景图像，以使其适合画布大小。但是它不起作用。

我遵循了这个问题，并根据评论，我实施了扩展代码。

使用Fabric.js将背景图片拉伸到画布大小，网址为
http://fabricjs.com/docs/fabric.Canvas.html#setBackgroundImage

码

$(function () {     
    var canvas1 = new fabric.Canvas('canvas1');
            //Default
    var canvas = canvas1;

    //Change background using Image
    document.getElementById('bg_image').addEventListener('change', function (e) {
        canvas.setBackgroundColor('', canvas.renderAll.bind(canvas));
        canvas.setBackgroundImage(0, canvas.renderAll.bind(canvas));
        var file = e.target.files[0];
        var reader = new FileReader();
        reader.onload = function (f) {
            var data = f.target.result;
            fabric.Image.fromURL(data, function (img) {
                img.set({
                    width: canvas.getWidth(), 
                    height: canvas.getHeight(), 
                    originX: 'left', 
                    originY: 'top'
                });
                canvas.setBackgroundImage(img, canvas.renderAll.bind(canvas));
                /*canvas.setBackgroundImage(img, canvas.renderAll.bind(canvas), {
                    width: canvas.getWidth(),
                    height: canvas.getHeight(),
                    originX: 'left',
                    originY: 'top',
                    crossOrigin: 'anonymous'
                });*/
            });
        };
        reader.readAsDataURL(file);
    });
});

似乎它不能用于最新的beta版本，但是它可以用于1.7.19版本，但不能用于2.0.0-beta.7。

JSFiddle：版本2.0.0-beta.7：http : //jsfiddle.net/dhavalsisodiya/8vLo882n/3

版本1.7.19：http：//jsfiddle.net/dhavalsisodiya/8vLo882n/4/

Answer 1

@spankajd给出的解决方案几乎存在，但仍然不是100％准确的（因为您会看到背景图像并不完全适合画布）。

如@asturur在您提交的问题上所提到的，确实可以使用scaleXand scaleY属性（将数字作为缩放因子）来解决此问题。

但是，在这种情况下，您无需设置图像的width和height属性。另外，更好的（正确的）设置这些图像属性的方法是将它们作为选项（参数）传递给setBackgroundImage()方法（这可以解决一些性能问题），例如：

canvas.setBackgroundImage(img, canvas.renderAll.bind(canvas), {
   scaleX: canvas.width / img.width,
   scaleY: canvas.height / img.height
});

...而不是分别为图像对象设置它们。

话虽如此，这是一个完整的工作示例：

canvas.setBackgroundImage(img, canvas.renderAll.bind(canvas), {
   scaleX: canvas.width / img.width,
   scaleY: canvas.height / img.height
});

$(function() {
   var canvas1 = new fabric.Canvas('canvas1');
   //Default
   var canvas = canvas1;
   canvas.backgroundColor = '#34AD39';
   canvas.renderAll();
   //Change background using Image
   document.getElementById('bg_image').addEventListener('change', function(e) {
      canvas.setBackgroundColor('', canvas.renderAll.bind(canvas));
      canvas.setBackgroundImage(0, canvas.renderAll.bind(canvas));
      var file = e.target.files[0];
      var reader = new FileReader();
      reader.onload = function(f) {
         var data = f.target.result;
         fabric.Image.fromURL(data, function(img) {
            canvas.setBackgroundImage(img, canvas.renderAll.bind(canvas), {
               scaleX: canvas.width / img.width,
               scaleY: canvas.height / img.height
            });
         });
      };
      reader.readAsDataURL(file);
   });
});

Answer 2

您好，请更新以下代码。

img.set({
           width: canvas.getWidth(), 
           height: canvas.getHeight(), 
           originX: 'left', 
           scaleX : canvas.getWidth()/img.width,   //new update
           scaleY: canvas.getHeight()/img.height,   //new update
           originY: 'top'
 });

http://jsfiddle.net/8vLo882n/6/