Question

我正在开发一个Web应用程序，用户可以从本地计算机拖放图像以获得它的平均颜色。由于某种原因，拖放区域不起作用。我知道我的addImage函数有问题，但我无法弄明白。任何帮助将不胜感激。

HTML代码：

     <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Get Image Average Color</title>
    <link href="css/finalProject.css" rel="stylesheet" type="text/css" />
 </head>
 <body>
    <h1>Average Color of an Image</h1>
    <p>Drop an image in the box below to get the average color of it in RGB values! </p>
    <div id="dropBox" ondrop="drop(event)" ondragover="drag(event)" > <p>Drop your image here! :)</p> </div>
    <div id="images"></div>
 <div class="colorBox"> </div>
 </body>

JS代码：

      function addImage(file) {
          img.src = URL.createObjectURL(file);
          var hue = document.querySelector(".colorBox");
          img.onload = function () {
              var rgb = averageColor(img); 
              var rgbString = "rgb(" + r + " , "+ g + ", " +  b + ")";
              rgbString.innerHTML="";
              hue.style.backgroundColor = rgbString;
          }
              document.getElementById('images').appendChild(hue);
      }

    /* draw the image in a canvas element then use the
    getImageData method to return an array containing RGBA values*/

   function averageColor(img) {
     //Create canvas and set width and height to that of the image
            var canvas = document.createElement("canvas");
            var ctx = canvas.getContext("2d");
            var width = canvas.width = img.naturalWidth; 
            var height = canvas.height = img.naturalHeight;

            ctx.drawImage(img, 0, 0);
            var imageData = ctx.getImageData(0, 0, width, height);
            var data = imageData.data;
            var r = 0; // Set rgb values to 0 for un-supported brows.
            var g = 0;
            var b = 0; 

        //loop over each pixel
         for (var i = 0, l = data.length; i < l; i += 4) {
            r += data[i];
            g += data[i+1];
            b += data[i+2];
          }

            //get the average values for rgb using Math.floor 

            r = Math.floor(r / (data.length / 4));
            g = Math.floor(g / (data.length / 4));
            b = Math.floor(b / (data.length / 4));

            return { r: r, g: g, b: b };
    }

    //create the drag and drop zone..



    function drag(event) {
            event.stopPropagation();
            event.preventDefault();
            //event.dataTransfer.setData;
            event.dataTransfer.dropEffect = "copy"; //this property will copy the image to the new location
         }

    function drop(event) {
            event.stopPropagation();
            event.preventDefault();
            var img = event.dataTransfer.createObjectURL(file); 
            event.dropBox.appendChild(document.getElementById(img)); 
            //image into the drop zone
            document.getElementById("images").innerHTML = '';


        }

Answer 1

如果你只是在jsfiddle上开发这个，你需要考虑你在JavaScript框中编写的函数不在全局上下文中，但是当你用HTML添加你的事件时：<div id="dropBox" ondrop="drop(event)" ondragover="drag(event)">它会仅在函数位于全局上下文中时才起作用。

关于jsfiddle的解决方法就是这样写：

window.drop = function(event){}

而不是

function drop(event){}

如果您正在开发其他地方，只需确保事件处理函数是全局的，然后您可以在更友好的第二版中编写它。

正如您已经承认的那样，您的代码中还存在许多其他问题。这是JSFIDDLE快速传递它修复一些其他问题。通过一些小的更改，您的代码按预期工作，并且框中填充了平均颜色。

图像拖放调试

1 个答案: