Javascript Chrome扩展img.onload函数持续执行

我正在编写一个Chrome扩展，它可以阻止可能具有攻击性的内容。我正在实施的一种方法是扫描所有图像，看看有多少皮肤显示出来。我创建一个新的图像对象，将crossOrigin标志设置为“”，然后创建一个onload函数，将图像绘制到画布上，从画布读取数据，然后执行分析，为调用函数设置一个布尔标志。定义onload函数后，我从网页的源列表中为图像节点分配一个src。 image_scanner函数在for循环内调用，for循环通过网页上的每个图像节点，并执行各种阻止操作。这是我执行的最后一个操作。以下是调用图像扫描仪的代码：

                if (image_scanner(options.scanner_sensitivity, images[i]))
                {
               // Replace the image with a blank white image
               images[i].src = chrome.extension.getURL("replacement.png");


                }

这是图像扫描仪的功能

    function image_scanner(sensitivity, image)
    {
       // Sensitivity is a number and image is an image node.

      // Declare a variable to count the number of skin pixels
      var skin_count = 0;

      if (image.width == 0 && image.height ==0)
      {
       // This means the image has no size and we cannot block it.
       return false;
      } // end if


      var return_value = null; // set bool flag
      // Create an HTML5 canvas object.
   var canvas = document.createElement('canvas');

      //window.alert("Created Canvas."); // used for testing.

      // Get the context for the canvas.
      var context = canvas.getContext("2d"); // This is what we actually use to draw images and pull the data from them.

      context.canvas.width = image.width; // Set the canvas width to the width of the image
      context.canvas.height = image.height; // Set the canvas height to the height of the image


      img = new Image(); // Create a new image node to circumvent cross-domain restrictions.
      img.crossOrigin = " "; // Set crossOrigin flag to ' ' so we can extract data from it.

      img.onload = function(){
          window.alert(img.src); // This always gives the same src until Chrome ends the function
          context.drawImage(this, 0,0); // Draw the image onto the canvas.

          var pixels = context.getImageData(0, 0, image.width, image.height).data;


          // Now pixels is an array where every four entries in the array is the RGBa for a single pixel.
          // So pixels[0] is the R value for the first pixel, pixels[1] is the G value for the first pixel,
          // pixels[2] is the B value for the first pixel, and pixels[3] is the a (alpha or transparency) value for the first pixel.

          // This means that pixels.length/4 is the number of pixels in the image.
          // Now we calculate the number of skin pixels we can have before blocking the image.
          var limit = ((pixels.length)/4) * (sensitivity/100);

          // Now we go through the array of pixel data, checking if each pixel is a skin colored pixel based on its RGB value (the first 3 entries for that pixel in the pixels array)
          // Each time we find a skin colored pixel, we increment skin_count and check if skin_count >= limit. If so, we return true.
          for (var i = 0; i < pixels.length; i += 4) // We go up by four since every four entries describes 1 pixel
          {

           // pixel is skin if 0 <= (R-G)/(R+G)  <= .5  and B/(R+G) <= .5 pixels[i] is the R value, pixels[i+1] is the G value, and pixels[i+2] is the B value.
           if ((0 <= ((pixels[i] - pixels[i+1])/(pixels[i] + pixels[i+1]))) && (((pixels[i] - pixels[i+1])/(pixels[i] + pixels[i+1])) <= 0.5) && ((pixels[i+2]/(pixels[i] + pixels[i+1])) <= 0.5))
           {
               skin_count++;
               //window.alert("Found skin pixel."); // used for testing.

               if (skin_count >= limit)
               {
                   //window.alert("Blocking image with src: " + image.src); // used for testing.
                   img.onload = null; // try to clear the onload function
                   return_value = true;
                   return false;
               } // end inner if
           } // end outer if
          } // end for loop

       //var temp;
       img.onload = null;
       return_value = false;
       return false;

      }; // end onload function


   img.src = image.src; // Set the new image to the same url as the old one.    



   return return_value;
} // end image_scanner

功能图像\u扫描仪（灵敏度、图像）
{
//灵敏度是一个数字，图像是一个图像节点。
//声明一个变量以计算蒙皮像素数
var皮肤计数=0；
if（image.width==0&&image.height==0）
{
//这意味着图像没有大小，我们无法阻止它。
返回false；
}//如果结束，则结束
var return_value=null；//设置bool标志
//创建一个HTML5画布对象。
var canvas=document.createElement（'canvas'）；
//window.alert（“已创建画布”）；//用于测试。
//获取画布的上下文。
var context=canvas.getContext（“2d”）；//这就是我们实际用来绘制图像并从中提取数据的内容。
context.canvas.width=image.width；//将画布宽度设置为图像的宽度
context.canvas.height=image.height；//将画布高度设置为图像的高度
img=new Image（）；//创建一个新的映像节点以绕过跨域限制。
img.crossOrigin=“；//将crossOrigin标志设置为“”，以便我们可以从中提取数据。
img.onload=函数（）{
window.alert（img.src）；//在Chrome结束函数之前，它始终提供相同的src
context.drawImage（this，0,0）；//将图像绘制到画布上。
var pixels=context.getImageData（0，0，image.width，image.height）；
//现在像素是一个数组，其中数组中的每四个条目是单个像素的RGBa。
//因此，像素[0]是第一像素的R值，像素[1]是第一像素的G值，
//像素[2]是第一像素的B值，像素[3]是第一像素的a（α或透明度）值。
//这意味着pixels.length/4是图像中的像素数。
//现在，我们计算在阻塞图像之前可以拥有的皮肤像素数。
变量限制=（（像素长度）/4）*（灵敏度/100）；
//现在我们浏览像素数据数组，根据其RGB值（像素数组中该像素的前3个条目）检查每个像素是否为肤色像素
//每次我们找到一个皮肤颜色的像素，我们增加皮肤计数并检查皮肤计数是否>=限制。如果是，我们返回真。
对于（var i=0；i//像素是0的皮肤，如果你要将代码> > Src < /代码>设置为空白图像，并且不希望<代码> .OnLoad 在加载时再次调用，则在设置<代码>之前，请清除<代码> .OnLoad  > Src 
if (image_scanner(options.scanner_sensitivity, images[i])) {
    // clear our onload handler
    images[i].onload = function() {};
    // Replace the image with a blank white image
    images[i].src = chrome.extension.getURL("replacement.png");
}

看起来您正在从
onload
处理程序返回一个值，并期望从image\u scanner函数返回该值。它不是这样工作的。onload处理程序在一段很长的时间后被调用，而
image\u scanner
已经返回了很长时间。您需要重写代码才能工作通过异步处理
onload
我尝试了这一点，但没有成功。如果您注意到，函数image\u scanner在If语句中被调用，因为它返回bool。我在image\u scanner的内部创建了一个新的image对象，并赋予它重复的onload函数。@DragonSlayer-请参阅我添加到的第二个问题我的答案是。
onload
是异步的（在图像扫描仪（）之后很久调用）`返回，因此您无法像尝试执行的那样同步使用它。如果我在onload处理程序中放置bool标志，然后在其后放置while循环，则在onload处理程序设置bool标志之前，将不会执行任何操作？@DragonSlayer-您不能在javascript中这样循环。循环时不能运行其他代码，因此无法在运行时设置您的标志循环。您必须将代码转换为使用异步事件。好的。您认为这将解决onload函数持续重新执行的问题吗？我在考虑这一点，我想这可能是因为当onload侦听器启动时，img对象已被销毁，因为函数返回了.Doe这有什么意义？