相关疑难解决方法(0)

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

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

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

使用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'
                });*/
            });
        }; …
Run Code Online (Sandbox Code Playgroud)

javascript canvas fabricjs

2
推荐指数
2
解决办法
5921
查看次数

标签 统计

canvas ×1

fabricjs ×1

javascript ×1