代码

Question

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

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

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/

Answer 1

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

这个问题的正确解决方案确实是使用scaleX和scaleY属性（它采用数字作为缩放系数），如{{3}所述在您提交的@asturur上。

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

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>

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/

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

代码

2 个答案: