Konvajs - Layer.toImage () возвращает ноль вместо данных изображения - PullRequest
Новая
       12

Konvajs - Layer.toImage () возвращает ноль вместо данных изображения

0 голосов
/ 25 апреля 2018

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

Без добавления элемента Image: 

layer.toImage({
   callback: function(img) { //img = "base_64 image data".
     console.log(img.src);
   }
});

С элементом Image: 

layer.toImage({
   callback: function(img) { //img = null
     console.log(img.src); // Error: src of null.
   }
});

Здесь происходит сбой приложения, и я не могу найти проблему.Я попытался добавить и удалить изображение, а затем экспортировать изображение, работает отлично.У меня проблема возникает только тогда, когда в слое рисуется элемент изображения.

Есть идеи, почему это происходит?

Обновление

Пример кода:

var myLayer= this.refs.layer;
myLayer.children.forEach(element => {
  if (element.attrs.elementType === "text"){
    if (element.isVisible()){
      element.visible(false);
      hiddenElements.push(element.id);
    }
  }
});

myLayer.toImage({
  callback: function(img) { //If image is drawn to the leyer img = null
    *Ajax function here*    //Else img has base64 info of the leyer
  },
  mimeType: "image/png"
});

Затем я возвращаю всем скрытым элементам значение true, и сцена возвращается в исходное состояние.

1 Ответ

0 голосов
/ 27 апреля 2018

Для всех, кто придет к этому и интересуется «CORS», Википедия представляет CORS как

Обмен ресурсами между источниками (CORS) - это механизм, который позволяет ограниченные ресурсы (например, шрифты) на веб-странице, запрашиваемой у другой домен вне домена, из которого был первый ресурс служил. Веб-страница может свободно вставлять изображения из разных источников, таблицы стилей, сценарии, фреймы и видео. Некий "междоменный" запросы, особенно запросы Ajax, по умолчанию запрещены политика безопасности того же происхождения.

На практике это означает, что холст не может обработать изображение из другого домена (без поддержки CORS) в большой двоичный объект. Если он попытается, браузер вызовет ошибку «Tainted canvas», которую вы можете наблюдать в консоли браузера.

Существует содержательное объяснение, почему это так в этом ответе Майка С на этот ТАК вопрос , который я для краткости скопирую здесь.

Представьте, что у вас открыта банковская выписка, которую могут просматривать только вы из-за какого-то аутентификационного заголовка, но потом стороннего создает элемент canvas и вставляет это изображение в canvas. Oни может затем преобразовать это в BLOB-объект и отправить его обратно на домашнюю базу, если холст не был помечен как «испорченный»

Оказывается, преимущества холста также могут быть подводными камнями. Или, как сказал бы Йода «Сильно вы стали, темная сторона, которую я чувствую в вас».

...