createImage () против createImg () против loadImage () в p5.какой использовать для загрузки в массив изображений для использования в ml5? - PullRequest
Новая
       31

createImage () против createImg () против loadImage () в p5.какой использовать для загрузки в массив изображений для использования в ml5?

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

Я пытаюсь собрать пример из ml5 о передаче стиля изображения (https://ml5js.org/docs/style-transfer-image-example) с примерами p5.js, анализирующими JSON URL-адресов изображений, и добавляю их в массив для отображения в виде изображений. Я нажимаютупик, поскольку я не думаю, что я полностью понимаю способы, которыми p5 хранит изображения в массиве, и при этом я не полностью понимаю разницу между createImg () createImage () или loadImage () (какой использовать !!)

Цель состоит в том, чтобы использовать API изображений Bing для возврата списка URL-адресов из поиска (эта часть работает нормально) и запускать эти изображения через предварительно обученную модель (эта часть работает нормально, когда используется только на локальном изображении).Я не могу понять, как соединить эти две вещи. Любые предложения или советы (это вообще возможно?!) Очень ценятся.

Я уже пытался загрузить изображения в массив и выполнить итерацию помассив в функции draw (). Проблема возникает, когда мне нужно обратиться к изображению, чтобы фактически применить режим передачи стилял.Кажется, что мой массив пуст, когда я пытаюсь ссылаться на него где угодно, кроме draw ().Я уверен, что я думаю об этом неправильно.

var imageData;
let imgArray = [];

var w = (window.innerWidth)/3;
var h = (window.innerHeight)/4;
var index = 0;
var xPos = 0;
var yPos = 0;
var indexMax = 3;

let style;
let resultImg;

function preload() {
  loadData();
}

function loadData(){
  var url = api + search + subscriptionKey;
  loadJSON(url, gotData);
}

function gotData(data) {
  imageData = data;

  for (var i=0; i < indexMax; i++){
      _url = imageData.value[i].contentUrl;
      imgArray.push(loadImage(_url));

  }

function displayImages(){
  if (index < 3){
      index++;
    } else {
      index = 0;
    };

function setup() {
  createCanvas(1200, 800).parent('canvasContainer');

  var button = select('#display');
  button.mousePressed(displayImages);

  var transferBtn = select('#transferBtn');
  transferBtn.mousePressed(transferImages);

  //create style method
  style = ml5.styleTransfer('/model', modelLoaded);

}

function draw() {
  image(imgArray[index], xPos, yPos, w, h);

}

//ml5 stuff 
function modelLoaded() {
  if (style.ready){
   select('#status').html('Model Loaded');
    //style.transfer(gotResult);
  }
}

function transferImages(){
  select('#status').html('applying style transfer');

  style.transfer(tempImg, function(err, result){
    createImg(result.src);
  });

 select('#status').html('done');
}

Я пытаюсь (безуспешно) создать «tempImg» из imgArray [0], чтобы попытаться выяснить, куда должен идти этот createImage, но не получил этого для работы.У меня включен CORS, поэтому я не думал, что это проблема, но я получаю следующую ошибку.Пожалуйста, помогите мне понять, как думать об этом по-другому.cross-origin data error

...