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

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()无需传递参数，因为您正在设置过滤器。

DEMO

 // 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>