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

Question

我有一个 fabricjs 画布 [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>