处理网页中的图像有困难

Question

我一直在尝试上传一个图像，并将其转换为灰度版本，然后在一个网页上显示这两个图像。我已经在本地测试和验证了javascript代码的工作情况，并且它工作正常。然而，当我将它集成到我的网页中时，只有原始图像被上传。未生成灰度图像或未处理函数。

    function doUpload(){
  var image = new SimpleImage(inputFile);
  image.drawTo(CanvasOG);
  var imageGS = grayScale(image);
  imageGS.drawTo(CanvasGS);
  //var NewImage = grayScale(image);
  //NewImage.drawTo(CanvasGS)
}

你能告诉我哪里出了问题吗？

我正在使用杜克大学的学习编程课程的SimpleImage库来实现读取图像和像素值的函数

我发布了一个到代码页的链接，以防您想用html页面https://codepen.io/girish-kumar-peddi/pen/PoPBxKb查看完整的代码

Answer 1

SimpleImage.js drawTo()的性质包含一个setTimeout()。因此，imageData不是立即设置的，而是在100ms之后设置的。因此，在将图像绘制到画布之后，请等待一段时间，然后再操作图像数据。下面包含了drawTo()实现。

 // Draws to the given canvas, setting its size to match SimpleImage's size
    drawTo: function (toCanvas) {
        if (this.imageData != null) {
            __SimpleImageUtilities.flush(this.context, this.imageData);
            toCanvas.width = this.getWidth();
            toCanvas.height = this.getHeight();
            toCanvas.getContext('2d').drawImage(this.canvas, 0, 0, toCanvas.width, toCanvas.height);
        }
        else {
            var myself = this;
            setTimeout(function() {
                myself.drawTo(toCanvas);
            }, 100);
        }
    },