Fatal编程技术网

Javascript 图像拖放调试

javascript html canvas

Javascript 图像拖放调试,javascript,html,canvas,Javascript,Html,Canvas,我正在开发一个web应用程序，用户可以从本地计算机拖放图像，以获得图像的平均颜色。由于某些原因，拖放区域不起作用。我知道我的addImage函数有问题，但我真的无法解决。任何帮助都将不胜感激 HTML代码： <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>Get Image Average Color</tit

我正在开发一个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>


获取图像平均颜色
图像的平均颜色
在下面的框中放置一幅图像，以获得它的平均颜色（RGB值）

把你的照片放在这里！：）
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 = '';


        }

函数添加图像（文件）{
img.src=URL.createObjectURL（文件）；
var hue=document.querySelector（“.colorBox”）；
img.onload=函数（）{
var rgb=平均颜色（img）；
var rgbString=“rgb（“+r+”，“+g+”，“+b+”）；
rgbString.innerHTML=“”；
hue.style.backgroundColor=rgbString；
}
document.getElementById（'images'）.appendChild（色调）；
}
/*在画布元素中绘制图像，然后使用
getImageData方法返回包含RGBA值的数组*/
函数平均颜色（img）{
//创建画布并将宽度和高度设置为图像的宽度和高度
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，宽度，高度）；
var数据=imageData.data；
var r=0；//对于不支持的浏览，将rgb值设置为0。
var g=0；
var b=0；
//在每个像素上循环
对于（变量i=0，l=data.length；i
如果您只在JSFDDLE上开发，您需要考虑在JavaScript框上编写的函数不在全局上下文中，但是当您将这些事件添加到HTML中时，如“代码> < /代码>”，只有在全局上下文中，函数才会起作用。p>
JSFIDLE的一个解决方法是这样编写：


window.drop = function(event){}


而不是


function drop(event){}


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


正如您已经承认的那样，代码中还有许多其他问题。这里是一个快速通过它修复一些其他问题。通过一些小的更改，您的代码可以按预期工作，并且框中填充了平均颜色。
由于某些原因，拖放区不工作。
您认为它不工作是什么意思？你的drop方法没有被调用？你能把你的代码放到JSFIDLE.net中吗？是的，它没有被调用。HTML页面中不会显示任何更改。这里有一个JSFIDLE：非常感谢。。