时间戳

首页 > 解决方案 > 处理网页中的图像时遇到问题

javascript - 处理网页中的图像时遇到问题

问题描述

我一直在尝试上传图像并将其转换为灰度版本，然后在网页上显示这两个图像。我已经在本地测试并验证了 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 页面https://codepen.io/girish-kumar-peddi/pen/PoPBxKb查看整个代码，我会发布一个指向 codepen 页面的链接

标签： javascripthtmlimage-processing

解决方案

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);
        }
    },

推荐阅读