Question

我创建了一个简单的网页，可以进行基本的图像处理。我已经使用php上传图像和Python（cgi-scripting）来调整大小，如果它们的宽度或高度分别超过600px或400px（通过ajax调用）。

以下是该场景：

用户选择图像。
用户点击上传按钮。
这会对upload.php进行ajax调用，将文件上传到服务器。
成功时，如果图像大于最大宽度和高度，则会对resize.py（cgi-scripting）进行另一次ajax调用以调整图像大小。
成功时，已调整大小的图像将绘制到画布上。
用户点击Run按钮。（图像更改为GrayScale）。
用户点击Reset按钮。（原始图像绘制在画布上）。

直到这里的一切都运转良好。

现在，如果用户选择另一个图像，上传并点击Run按钮，则此Run按钮事件触发的功能将执行两次。如果按下Reset按钮，则此事件触发的功能将执行3次。

如果上传了3 ^rd图像，则在按下Run按钮时Run按钮事件执行3次，如果Reset按钮是按下，该功能执行6次。如果上传了另一张图片，它会继续添加。

我还有其他两个图像效果，也有同样的问题。我无法弄清楚如何解决这个问题。任何人都有任何想法为什么会这样？我该如何解决这个问题？

请参阅实际操作代码（上一张幻灯片）：

http://#########/Main/JS/javascript.html

的JavaScript：

$('#grayscaleButtonUpload').click(function() {

  var input = document.getElementById('imageLoader');
  imageName = input.value;
  var file = input.files[0];

  if(file != undefined) {
    formData= new FormData();
    if(!!file.type.match(/image.*/)) {
      formData.append("image", file);

      // Make the ajax call to upload the image
      $.ajax({
        url: "upload.php",
        type: "POST",
        data: formData,
        processData: false,
        contentType: false,
        success: function(data) {
          var input = document.getElementById('imageLoader');
          imageName = input.value;
          var file = input.files[0];
          formData = new FormData();
          formData.append("filename", file.name);

          // Make the ajax call to resize the image
          $.ajax({
            url: "http://##########/Main/cgi-bin/resize.py",
            type: "POST",
            data: formData,
            processData: false,
            contentType: false,
            success: function(data) {
              console.log(data);
              var grayscaleCanvas = document.getElementById("imageCanvas");
              var grayscaleCtx = grayscaleCanvas.getContext("2d");
              var grayscaleImage = new Image();

              grayscaleImage.src = "http://###########/Main/JS/upload/" + file.name;
              $(grayscaleImage).load(function() {

                if (!grayscaleCanvas.toDataURL() == document.getElementById('imageCanvas').toDataURL()) {
                    grayscaleCtx.clearRect(0, 0, grayscaleCanvas.width, grayscaleCanvas.height);
                    $('#imageCanvas').css({"border":"none", "border-color": "none"});
                };

                grayscaleCanvas.width = grayscaleImage.width;
                grayscaleCanvas.height = grayscaleImage.height;
                grayscaleCtx.drawImage(grayscaleImage, 0, 0);
                $('#imageCanvas').css({"border":"ridge", "border-color": "green"});

                // Run button event
                $("#grayscaleButtonRun").click(function() {
                  console.log('Run button pressed')
                  var grayscaleImageData = grayscaleCtx.getImageData(0, 0, grayscaleCanvas.width, grayscaleCanvas.height);
                  var grayscalepixels = grayscaleImageData.data;
                  var grayscaleNumPixels = grayscaleImageData.width * grayscaleImageData.height;

                  for (var i = 0; i < grayscaleNumPixels; i++) {
                    var avg = (grayscalepixels[i * 4] + grayscalepixels[i * 4 + 1] + grayscalepixels[i * 4 + 2]) / 3;
                    grayscalepixels[i * 4] = avg;
                    grayscalepixels[i * 4 + 1] = avg;
                    grayscalepixels[i * 4 + 2] = avg;
                  };

                  grayscaleCtx.clearRect(0, 0, grayscaleCanvas.width, grayscaleCanvas.height);
                  grayscaleCtx.putImageData(grayscaleImageData, 0, 0);

                  // Reset button event
                  $('#grayscaleButtonReset').click(function() {
                    console.log('Reset button pressed')
                    grayscaleCtx.clearRect(0, 0, grayscaleCanvas.width, grayscaleCanvas.height);
                    grayscaleCanvas.width = grayscaleImage.width;
                    grayscaleCanvas.width = grayscaleImage.width;
                    grayscaleCtx.drawImage(grayscaleImage, 0, 0);
                  });
                });
              });
            }
          });
        }
      });
    } else {
      alert('Selected file is not an image!');
    }
  } else {
  alert('No File Selected!');  
  }
});

Answer 1

事件处理程序正在向按钮添加新的click处理程序，而不删除那些按钮。

理想情况下，您应该只添加一个处理程序一次：在页面上加载静态元素，在DOM上插入动态创建的元素。

或者，一个hacky解决方法是使用.off（与.on相反）在添加新元素之前从元素中删除特定类型的所有处理程序。

JavaScript代码执行多次

以下是该场景：

请参阅实际操作代码（上一张幻灯片）：

的JavaScript：

1 个答案: