Rhino Interpreter 中的 JavaScript - 函数返回未定义

Question

我正在使用 Blue 中的嵌入式 Rhino Interpreter（Csound 的音乐创作环境）来生成“乐谱”（乐谱）。在蓝色中，您可以通过编写函数然后执行来做到这一点

score = myFunction()

我的函数使用 onLoad 获取图像并提取像素信息，这些信息将用于生成分数。问题是我的函数没有足够的时间加载图像并在将数据分配给变量之前返回数据。我试过使用 setTimeout() 但这没有帮助。

我在浏览器中尝试过，它确实返回“未定义”。

基本上我需要一种延迟分配给分数变量的方法。这可能吗？

谢谢

function score(){
    var img = new Image();
    img.src = "http://static.webshopapp.com/shops/023001/files/024718445/256x256x2/major-dog-barbell-mini.jpg";
    img.crossOrigin = "Anonymous";
    var score = "abc";
    img.onload = function(){
        var canvas = document.createElement("canvas");
        canvas.width = img.width;
        canvas.height = img.height;
        var ctx = canvas.getContext("2d");
        ctx.drawImage(img, 0, 0);   
        var imgData=ctx.getImageData(0,0,canvas.width,canvas.height);
        score = "i1 0 2 440 0.5\n"
        for (var i=0;i<imgData.data.length;i+=4){
            score += "i1 + 0.1 " + (imgData.data[i] + 500).toString() + " 0.5\n"
        }
        return score;
    }
}
score = score();
// TRY THIS IN BROWSER - RETURNS UNDEFINED
//console.log(score())

Answer 1

（这里是蓝的作者）

对于 Blue，它现在实际上使用的是 Java 8 中内置的 Nashorn。（我在新的 Blue 版本中将该对象重命名为 JavaScriptObject。）

Nashorn 提供了一个 JS 引擎，但据我所知，它并没有提供人们期望在浏览器中使用的所有 API。我运行并调试了您的代码，发现一些关于“文档”和“图像”未定义的异常被抛出。我使用Java对象重写了代码，例如：

function genScore(){

    var url = new java.net.URL("http://static.webshopapp.com/shops/023001/files/024718445/256x256x2/major-dog-barbell-mini.jpg");
    var img = javax.imageio.ImageIO.read(url);


    score = "i1 0 2 440 0.5\n"
    for (var i = 0; i < img.getHeight(); i++) {
        for (var j = 0; j < img.getWidth(); j++) {
            var rgb = img.getRGB(i, j);
            score += "i1 + 0.1 " + (rgb + 500).toString() + " 0.5\n"
        };
    }
    return score;
}
score = genScore();

这大致奏效了。 （如果我理解正确，我认为您的代码仅使用红色值；必须使用位掩码修改此代码并移位以仅从 RGB 中获取 R 值；有关 Java 的 BufferedImage 类的更多信息，请访问https://docs.oracle.com/javase/7/docs/api/java/awt/image/BufferedImage.html ）。

Answer 2

你需要的是一个传入 score 函数的回调函数，当图片加载完成时会被触发：

// Adding a callback function as parameter
function score(callback){
    var img = new Image();
    img.src = "http://static.webshopapp.com/shops/023001/files/024718445/256x256x2/major-dog-barbell-mini.jpg";
    img.crossOrigin = "Anonymous";
    var score = "abc";

    img.onload = function(){

        var canvas = document.createElement("canvas");

        canvas.width = img.width;
        canvas.height = img.height;

        var ctx = canvas.getContext("2d");
        ctx.drawImage(img, 0, 0);   
        var imgData=ctx.getImageData(0,0,canvas.width,canvas.height);

        score = "i1 0 2 440 0.5\n"
        for (var i=0;i<imgData.data.length;i+=4)
        {
            score += "i1 + 0.1 " + (imgData.data[i] + 500).toString() + " 0.5\n"
        }
        // Now we can run the callback with our score data
        return callback(score);

    }
}

score(function(score){

  console.log(score);
  // Do your stuff with score data...

});