使用Fabric js将背景图像调整为画布大小 [英] Fit the background image to canvas size with Fabric js

问题描述

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

I am trying to stretch the background image so it can fit the canvas size. But its not working.

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

I have followed this question and based on comment i have implemented the stretching code.

使用Fabric.js将背景图像扩展为画布大小 < br>
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

It seems that it is not working with latest beta version, however its working with 1.7.19 version but not with 2.0.0-beta.7

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

JSFiddle: version 2.0.0-beta.7: http://jsfiddle.net/dhavalsisodiya/8vLo882n/3

varsion 1.7。 19： http://jsfiddle.net/dhavalsisodiya/8vLo882n/4/

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

推荐答案

@spankajd 提供的解决方案几乎存在，但仍然没有100％准确（正如您将看到的那样）背景图片并不完全适合画布。）

这个问题的正确解决方案确实是使用 scaleX 和 scaleY 属性（以缩放为数字）因素，如 @asturur 所提及的问题。

The proper solution to this problem is indeed to use the scaleX and scaleY property (which takes a number as scaling factor), as mentioned by @asturur on your submitted issue.

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

However, in that case you won't need to set the width and height property of the image. Also, a better (and correct) way of setting those image properties is to pass them as options (argument) to the setBackgroundImage() method (this may resolve some performance issues), as such :

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

...而不是单独为图像对象设置它们。

... instead of setting them for the image object separately.

如上所述，这是一个完整的工作示例：

that being said, here is a complete working example :

$(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>

这篇关于使用Fabric js将背景图像调整为画布大小的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！