处理网页中的图像时遇到问题答案

【问题标题】：Have trouble with processing image in web page处理网页中的图像时遇到问题
【发布时间】：2020-08-30 17:28:49
【问题描述】：

我一直在尝试上传图像并将其转换为灰度版本，然后在网页上显示这两个图像。我已经在本地测试并验证了 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)
}

你能告诉我出了什么问题吗？

PS 我使用杜克大学的学习编程课程的 SimpleImage 库来读取图像和像素值的功能

如果您想查看带有 html 页面的完整代码，我会发布一个指向 codepen 页面的链接 https://codepen.io/girish-kumar-peddi/pen/PoPBxKb

【问题讨论】：

标签： javascript html image-processing

【解决方案1】：

SimpleImage.js 的本质drawTo() 包含一个setTimeout()。因此imageData 不是立即设置的，而是在 100 毫秒后设置的。因此，在将图像绘制到画布后，请稍等片刻，然后再操作图像数据。在下面附上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);
        }
    },

【讨论】：