Question

我有一个fabricjs canvas [v2.4]，我试图通过url添加图像，然后应用过滤器（例如灰度）。

我设法通过url添加了图像，但我不太清楚过滤器部分的正确性。我在网上关注了一些示例，但始终会收到以下错误：

Uncaught TypeError: (intermediate value)(intermediate value).filter is not a function

这是涉及添加+过滤器的代码的简短摘要，同时您也可以在下面看到完整的小提琴。暂时没有注释执行过滤的两行代码，不会引起错误。

var img_url = "https://www.fariskassim.com/stage/rebel9/seongbukgu/mobile_browser_cam/v2/img/test.png"

// add image to fabriccanvas
function addImg_d() {

  fabric.Image.fromURL(img_url, function(img) {
    // uncomment the 2 lines below and you'll get an error
    //img.filters.push(new fabric.Image.filters.Grayscale());
    //img.applyFilters(d_canvas.renderAll.bind(d_canvas));
    img.scale(1);
    d_canvas.add(img);
  });
};

我也尝试了不同的图像/ base64数据，但是我仍然得到完全相同的错误。有任何想法吗？任何帮助表示赞赏。谢谢

// init fabric canvas
var d_canvas = new fabric.Canvas('d_canvas', {
  isDrawingMode: false,
  selection: false
});
d_canvas.enableGLFiltering = false;

// resize canvas on resize
window.addEventListener('resize', resizeCanvas_d, false);

function resizeCanvas_d() {
  d_canvas.setDimensions({
    width: 300,
    height: 200
  });
}

// resize on init
resizeCanvas_d();

// click to add image
var captureButton = document.getElementById('capture');
captureButton.addEventListener('click', () => {
  setTimeout(function() {
    addImg_d()
  }, 100);
});


var img_url = "https://www.fariskassim.com/stage/rebel9/seongbukgu/mobile_browser_cam/v2/img/test.png"

// add image to fabriccanvas
function addImg_d() {

  fabric.Image.fromURL(img_url, function(img) {
    // uncomment the 2 lines below and you'll get an error
    //img.filters.push(new fabric.Image.filters.Grayscale());
    //img.applyFilters(d_canvas.renderAll.bind(d_canvas));
    img.scale(1);
    d_canvas.add(img);
  });
};

html,
body {
  margin: 0;
  overflow: hidden;
}

#capture {
  position: fixed;
  z-index: 100;
  bottom: 0;
  left: 50%;
  transform: translate(-50%);
  font-size: 20px;
  padding: 10px;
  background-color: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/2.4.0/fabric.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<canvas id="d_canvas" style="border:1px solid #ccc"></canvas>

<button id="capture">Add</button>

Answer 1

在设置过滤器时，调用img.applyFilters()无需传递参数。

演示

// init fabric canvas
var d_canvas = new fabric.Canvas('d_canvas', {
  isDrawingMode: false,
  selection: false
});
d_canvas.enableGLFiltering = false;

// resize canvas on resize
window.addEventListener('resize', resizeCanvas_d, false);

function resizeCanvas_d() {
  d_canvas.setDimensions({
    width: 800,
    height: 600
  });
}

// resize on init
resizeCanvas_d();

// click to add image
var captureButton = document.getElementById('capture');
captureButton.addEventListener('click', () => {
  setTimeout(function() {
    addImg_d()
  }, 100);
});


var img_url = "https://cdn.shopify.com/s/files/1/1061/1924/files/Eye_Roll_Emoji_large.png?v=1541768914"

// add image to fabriccanvas
function addImg_d() {
  fabric.Image.fromURL(img_url, function(img) {
    // uncomment the 2 lines below and you'll get an error
    img.filters.push(new fabric.Image.filters.Grayscale());
    img.applyFilters();
    img.scale(1);
    d_canvas.add(img);
  },{crossOrigin:'anonymous'});
};

html,
body {
  margin: 0;
  overflow: hidden;
}

#capture {
  position: fixed;
  z-index: 100;
  bottom: 0;
  left: 50%;
  transform: translate(-50%);
  font-size: 20px;
  padding: 10px;
  background-color: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/2.4.0/fabric.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<canvas id="d_canvas" style="border:1px solid #ccc"></canvas>

<button id="capture">Add</button>

Fabric.js将过滤器应用于Image.fromURL

1 个答案: