`filter.applyTo не является ошибкой функции` при попытке изменить src изображения с помощью setSrc () в ткани js - PullRequest
Новая
       30

`filter.applyTo не является ошибкой функции` при попытке изменить src изображения с помощью setSrc () в ткани js

0 голосов
/ 10 января 2019

В настоящее время я работаю над редактором изображений, который позволяет мне обрезать изображение и применять фильтр. Я использую ткань JS версии 1.7.22. Я хочу реализовать функциональность кадрирования. поэтому мой поток обрезки выглядит следующим образом:

  1. обрезать изображение с помощью плагина и ger base64 обрезанного изображения.
  2. генерирует blobUrl из base64, который помогает отображать изображение на полотне js canvas.
  3. После обрезки изображения я просто заменяю старый src-образ на новый.

Отлично работает, когда изображение не имеет фильтра.

но когда я сначала пытаюсь установить фильтр на изображении, затем пытаюсь заменить src с помощью функции setSrc ().

выдает ошибку вроде ниже filter.applyTo is not a function

Я создал одну скрипку для демонстрации замены src после применения фильтра. https://jsfiddle.net/Mark_1998/98gLhcb4/1/

И я не могу обновить свою версию JS Fabric. Если любой патч доступен, то

Пожалуйста, помогите мне.

1 Ответ

0 голосов
/ 10 января 2019

Проблема заключается в этом куске кода: 

canvas.getActiveObject().setSrc('http://fabricjs.com/assets/pug_small.jpg', function(){
  canvas.renderAll();
}, canvas.getActiveObject().toObject());

Вы передаете canvas.getActiveObject().toObject() как options объект, который назначен вашему изображению в setSrc() -> setElement() -> _initConfig().

toObject() сериализует ваш fabric.Image, а массив filters больше не содержит фактический fabric.Filter, а скорее его сериализованную версию. Таким образом, у него нет прототипа с методом applyTo(), поэтому ошибка filter.applyTo is not a function, когда фабрика пытается повторно применить фильтры к вашему изображению после setSrc().

Вместо того, чтобы передавать весь сериализованный объект в качестве параметров, вам нужно выбрать свойства, которые вы действительно хотите передать. Поскольку я не уверен в ваших требованиях, я попытался заменить приведенный выше код следующим, и он работал для меня: 

  var options = canvas.getActiveObject().toObject();
  delete options.filters;
  options.crossOrigin = true;
  canvas.getActiveObject().setSrc('http://fabricjs.com/assets/pug_small.jpg', function(){
    canvas.renderAll();
  }, options);

Обратите внимание на options.crossOrigin = true - вы не сможете применять фильтры без него.

...