createImage() vs createImg() vs p5中的loadImage()。在ml5中使用哪种方法加载图像数组？

Question

我正在尝试将ml5中关于图像样式转换(https://ml5js.org/docs/style-transfer-image-example)的示例与解析图像URL的JSON的p5.js示例拼凑在一起，并将它们添加到一个数组中以显示为图像。我走进了死胡同，因为我认为我没有完全理解p5在数组中存储图像的方式，也没有完全理解createImg()、createImage()和loadImage()之间的区别(应该使用哪一个！)

我们的目标是使用Bing图像API从搜索中返回URLS列表(此部分工作正常)，并通过预先训练的模型运行这些图像(此部分仅在本地图像上使用时工作良好)。我无法理解的是将两者结合在一起。任何建议或建议(这可能吗？？！)非常感谢。

我已经尝试将图像加载到一个数组中，并在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');
}

我试图(不成功地)从imgArray创建一个"tempImg“，试图弄清楚这个createImage需要到哪里去，但是还没有让它工作。我启用了CORS，所以我不认为这是问题所在，但我得到了以下错误。请帮助我理解如何以不同的方式思考这个问题。

​

Answer 1

您应该使用loadImage而不是createImg。

style.transfer(tempImg, function(err, result){
    p5CompatibleImage = loadImage(result.src);
});