在 p5.js 画布中加载从函数生成的图像 [英] Load Image Generated From A Function in p5.js canvas

问题描述

我正在尝试加载由名为 gaborgen.js 的库中的函数返回的图像

I'm trying to load an image that is returned as a result of a function in a library called gaborgen.js

这个想法是我应该能够使用这个库生成一个 Gabor 补丁图像，然后我需要将它存储在 p5 中的一个图像变量中，并将其显示在画布上.

The idea is that I should be able to generate a Gabor patch image using this library and then I need to store this in an image variable in p5, and display it on the canvas.

库的工作方式是它有一个函数 gaborgen() 接受两个参数，所以 gaborgen(50,50) 将返回一个具有这些属性的 Gabor 补丁.该库的工作方式是将图像作为 base64 PNG 返回.

The way the library works is that it has a function gaborgen() that takes in two parameters, so gaborgen(50,50) would return a Gabor patch with those attributes. The way the library works is that it returns the image as a base64 PNG.

我尝试按如下方式加载图像，但失败了.生成的草图只是一个空白屏幕.

I tried to load the image as follows, but it failed. The resulting sketch is just a blank screen.

var img;

function setup() {
 createCanvas(640, 360);
 img = createImg(gaborgen(50,40));

}

function draw(){
 background(0);
 image(img, 0, 0, img.elt.width, img.elt.height);
}

Gaborgen.js 库中的 gaborgen() 函数如下；

The gaborgen() function in the Gaborgen.js library is as follows;

gaborgen = function(tilt, sf) {
  var a, aspectratio, b, contrast, gab_x, gab_y, gridArray, i, j, m, multConst, phase, preSinWave, ref, reso, sc, scaledM, sf_max, sf_min, sinWave, tilt_max, tilt_min, varScale, x, x_centered, x_factor, y, y_centered, y_factor;
  if ((tilt > 100 || tilt < 1) || (sf > 100 || sf < 1)) {
    console.log("ERROR: gaborgen arguenment input out of bounds");
  }
  reso = 400;
  phase = 0;
  sc = 50.0;
  contrast = 100.0;
  aspectratio = 1.0;
  tilt_min = 0;
  tilt_max = 90;
  sf_min = .01;
  sf_max = .1;
  tilt = rescale_core(tilt, tilt_min, tilt_max, 1, 100);
  sf = rescale_core(sf, sf_min, sf_max, 1, 100);
  x = reso / 2;
  y = reso / 2;
  a = numeric.cos([deg2rad(tilt)]) * sf * 360;
  b = numeric.sin([deg2rad(tilt)]) * sf * 360;
  multConst = 1 / (numeric.sqrt([2 * pi]) * sc);
  varScale = 2 * numeric.pow([sc], 2);
  gridArray = numeric.linspace(0, reso);
  ref = meshgrid(gridArray), gab_x = ref[0], gab_y = ref[1];
  x_centered = numeric.sub(gab_x, x);
  y_centered = numeric.sub(gab_y, y);
  x_factor = numeric.mul(numeric.pow(x_centered, 2), -1);
  y_factor = numeric.mul(numeric.pow(y_centered, 2), -1);
  preSinWave = numeric.add(numeric.add(numeric.mul(a, x_centered), numeric.mul(b, y_centered)), phase);
  i = 0;
  while (i < reso) {
    j = 0;
    while (j < reso) {
      preSinWave[i][j] = deg2rad(preSinWave[i][j]);
      j += 1;
    }
    i += 1;
  }
  sinWave = numeric.sin(preSinWave);
  m = numeric.add(.5, numeric.mul(contrast, numeric.transpose(numeric.mul(numeric.mul(multConst, numeric.exp(numeric.add(numeric.div(x_factor, varScale), numeric.div(y_factor, varScale)))), sinWave))));
  scaledM = rescale(m, 0, 254);
  return numeric.imageURL([scaledM, scaledM, scaledM]);
};

知道如何将函数返回的 base64 PNG 加载到 p5.js 中吗?

Any idea how I can load a base64 PNG returned by a function into p5.js like this?

推荐答案

通过将字符串直接传递到 loadImage() 函数，您可以直接在 P5.js 中使用 base-64 编码的图像.举个例子:

You can use a base-64 encoded image directly in P5.js by passing the string directly into the loadImage() function. Here's an example:

var img;

function setup() {
  createCanvas(400, 400);
  img = loadImage('data:image/png;base64, iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==');
}

function draw() {
  background(220);
    image(img, 0, 0, width, height);
}

注意参数的 data:image/png;base64, 部分.

我不知道 gaborgen() 函数返回什么，所以你需要做一些 调试 以准确找出代码故障的位置.以较小的步骤推进并检查您的开发者工具 错误.

I don't know what gaborgen() function returns, so you're going to need to do some debugging to figure out exactly where your code breaks down. Work forward in smaller steps and check your developer tools for errors.

这篇关于在 p5.js 画布中加载从函数生成的图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！