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

Posted 2023-03-25

【中文标题】使用 Fabric js 使背景图像适合画布大小

【英文标题】：Fit the background image to canvas size with Fabric js

【发布时间】：2018-04-11 03:36:30

【问题描述】：

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

我已经关注了这个问题并根据评论我已经实现了拉伸代码。

Strech the background image to canvas size with Fabric.jshttp://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/

【问题讨论】：

我猜是 2.0 beta 中的问题，它在以前的版本中工作

@Durga 是的，正确的。我正在使用最新版本来使用 IText 功能。

在github上报告了这个问题：github.com/kangax/fabric.js/issues/4427

【参考方案1】：

@spankajd 给出的 solution 几乎就在那里，但仍然不是 100% 准确（因为您会看到背景图像不完全适合画布）。

这个问题的正确解决方案确实是使用scaleX 和scaleY 属性（将数字作为比例因子），正如@asturur 在您提交的@987654326 中提到的那样@。

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

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/2.0.0-beta.7/fabric.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div style="margin-top:20px;">
   <label class="control-label">Add Background Image</label>
   <input type="file" id="bg_image" />
</div>

<canvas id="canvas1"   style="border:1px solid #000"></canvas>

【讨论】：

这会“拉伸”图像并且不保持纵横比。有什么维持比例的小窍门？

@Grunt ：这实际上不遵循图像纵横比。你有解决方案吗？

这工作正常，但在更改背景图像颜色的情况下，它会将图像缩小到小尺寸。请在此处查看代码jsfiddle.net/kantsverma/gczk4hqb/23

【参考方案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/