图片拖放调试

Question

I am developing a web application where a user can drag and drop images from his local computer to get the average color of it.我正在开发一个 Web 应用程序，用户可以在其中从他的本地计算机拖放图像以获得它的平均颜色。 For some reason the drag and drop zone doesn't work.由于某种原因，拖放区不起作用。 I know there is a problem with my addImage function, but I can't really figure it out.我知道我的 addImage 函数有问题，但我真的想不通。 Any help would be greatly appreciated.任何帮助将不胜感激。

HTML Code: 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 code: 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

If you are developing this exclusively on jsfiddle, you need to consider that the functions you write on the JavaScript box are not in the global context, but when you add your events in HTML like this: <div id="dropBox" ondrop="drop(event)" ondragover="drag(event)"> it will only work if the functions are in the global context.如果你专门在 jsfiddle 上开发这个，你需要考虑你在 JavaScript 框上编写的函数不在全局上下文中，但是当你在 HTML 中添加你的事件时，像这样： <div id="dropBox" ondrop="drop(event)" ondragover="drag(event)">只有当函数在全局上下文中时它才会起作用。

A workaround on jsfiddle is to write it like this: jsfiddle 的解决方法是这样写：

window.drop = function(event){}

Instead of代替

function drop(event){}

If you are developing somewhere else, just make sure that the event handling functions are global and then you can write it in the more friendly second version.如果你在其他地方开发，只要确保事件处理函数是全局的，然后你就可以在更友好的第二个版本中编写它。

As you have already acknowledged, there are a bunch of other problems in your code.正如您已经承认的那样，您的代码中还有很多其他问题。 Here is JSFIDDLE with a quick pass on it fixing some of the other issues.这是JSFIDDLE快速通过它修复了一些其他问题。 With some minor changes your code works as expected and the box is filled with the average color.通过一些细微的更改，您的代码可以按预期工作，并且框中填充了平均颜色。

图片拖放调试

问题描述

1 个解决方案

解决方案1
0 2016-05-13 08:31:41

图片拖放调试

问题描述

1 个解决方案

解决方案1 0 2016-05-13 08:31:41

解决方案1
0 2016-05-13 08:31:41