javascript – 使用Fabric js将背景图像调整为画布大小

我试图拉伸背景图像,使其适合画布大小.但它不起作用.

我已经按照这个问题并根据评论我已经实现了拉伸代码.

Strech the background image to canvas size with 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

varsion 1.7.19：http://jsfiddle.net/dhavalsisodiya/8vLo882n/4/

解决方法:

@spankajd给出的solution几乎在那里,但仍然不是100％准确(因为你会看到背景图像不完全适合画布).

这个问题的正确解决方案确实是使用scaleX和scaleY属性(以数字作为缩放系数),如@asturur所提及的issue所述.

但是,在这种情况下,您不需要设置图像的宽度和高度属性.此外,更好(和正确)设置这些图像属性的方法是将它们作为选项(参数)传递给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" width="600" height="400" style="border:1px solid #000"></canvas>

标签：javascript,canvas,fabricjs
来源： https://codeday.me/bug/20190926/1819331.html