Question

我正在开发一个Fabric JS应用程序，我正在尝试通过单击按钮来应用图像模式，它在Chrome中工作但在Firefox中出现以下错误：

加载图像文件时出错

＆＃13;

canvas = new fabric.Canvas('canvas');
s = '<svg width="150" height="150"><rect rx="20" ry="20" width="150" height="150" style="fill:#bbb;" /></svg>';
fabric.loadSVGFromString(s, function(objects, options) {
  shape = fabric.util.groupSVGElements(objects, options);
  shape.set({
    left: 200,
    top: 200,
    //scaleY: 2,
    //scaleX: 2,
    //fill: '#000',
    centeredScaling: true
  });
  canvas.add(shape).renderAll();
});

$('.pat').click(function() {
  var src = $(this).css('background-image');
  console.log(src);
  var src = src.replace('url(', '').replace(')', '');
  console.log(src);
  fabric.util.loadImage(src, function(img) {
    pattern = new fabric.Pattern({
      source: img,
      repeat: 'repeat'
    });
    if (shape instanceof fabric.PathGroup) {
      shape.getObjects().forEach(function(o) {
        o.fill = pattern;
      });
    } else {
      shape.fill = pattern;
    }
    canvas.renderAll();
  });

});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.5.0/fabric.min.js"></script>
<script src="../js/fabric.js"></script>
<button style="background-image: url('http://s27.postimg.org/8yc1grpwz/pt1.jpg');" class="pat">pattern1</button>
<button style="background-image: url('http://s27.postimg.org/n8lls969f/pt2.jpg');" class="pat">pattern2</button>
<button style="background-image: url('http://s27.postimg.org/gd1d95bsj/pt4_copy.jpg');" class="pat">pattern3</button>


<canvas id='canvas' width="500" height="400" style="border:#000 1px solid;"></canvas>

＆＃13;

JSFiddle Demo

Answer 1

这不是图像问题加载或fabricjs问题。从控制台日志中可以看出，您传递的是包含引号的src网址。你必须删除它们。

我刚刚改变了这个：

      var src = src.replace('url(', '').replace(')', '');

进入这个：

  var src = src.replace('url("', '').replace('")', '');

＆＃13;

canvas = new fabric.Canvas('canvas');
s = '<svg width="150" height="150"><rect rx="20" ry="20" width="150" height="150" style="fill:#bbb;" /></svg>';
fabric.loadSVGFromString(s, function(objects, options) {
  shape = fabric.util.groupSVGElements(objects, options);
  shape.set({
    left: 5,
    top: 5,
    centeredScaling: true
  });
  canvas.add(shape).renderAll();
});

$('.pat').click(function() {
  var src = $(this).css('background-image');
  var src = src.replace('url("', '').replace('")', '');
  fabric.util.loadImage(src, function(img) {
    pattern = new fabric.Pattern({
      source: img,
      repeat: 'repeat'
    });
    if (shape instanceof fabric.PathGroup) {
      shape.getObjects().forEach(function(o) {
        o.fill = pattern;
      });
    } else {
      shape.fill = pattern;
    }
    canvas.renderAll();
  });

});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.5.0/fabric.min.js"></script>
<script src="../js/fabric.js"></script>
<button style="background-image: url('http://s27.postimg.org/8yc1grpwz/pt1.jpg');" class="pat">pattern1</button>
<button style="background-image: url('http://s27.postimg.org/n8lls969f/pt2.jpg');" class="pat">pattern2</button>
<button style="background-image: url('http://s27.postimg.org/gd1d95bsj/pt4_copy.jpg');" class="pat">pattern3</button>


<canvas id='canvas' width="500" height="400" style="border:#000 1px solid;"></canvas>

＆＃13;

在Fabric JS中将图像作为模式加载时出错

1 个答案: