Fabric.js применяет фильтр к Image.fromURL - PullRequest
Новая
       7

Fabric.js применяет фильтр к Image.fromURL

0 голосов
/ 04 октября 2018

У меня есть полотно 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>

1 Ответ

0 голосов
/ 04 октября 2018

Вызов 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>
...