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>