bug注意到使用javascript渲染位置

Question

我有这个代码，它首先创建一个变量位置，其中包含图像的所有x，y位置的宽度和高度。然后使用图像中的选区域从位置克隆中移除这些位置，以使两个不同阵列中所有位置的总和。

var positions = [];
var areas = {}
var area_counter = 0;

var image_width = $('.img-class')[0].naturalWidth;
var image_height = $('.img-class')[0].naturalHeight;

var area = image_width * image_height;

var img_width = 0;
var img_height = 0;
for (counter = 0; counter < area; counter++) { 
    positions.push([img_width, img_height]);

    img_width += 1;
    if (img_width == image_width) {
        img_width = 0;
        img_height += 1;
    }
}

var drop_boxes = $('.drop-box');
var area_grid = [];
var image_width = $('.img-class')[0].naturalWidth;
var image_height = $('.img-class')[0].naturalHeight;

drop_boxes.each(function() {
    var position = $(this).position();
    var width =  $(this).width();
    var height = $(this).height();
    var positions_clone = positions.slice(0);
    //console.log(positions_clone.length);

    var top_offset = parseInt((position['top'] * image_width)/img_width);
    var left_offset = parseInt((position['left'] * image_height)/img_height);

    position['top'] = top_offset;
    position['left'] = left_offset;

    var width_offset = parseInt((width * image_width)/img_width);
    var height_offset = parseInt((height * image_height)/img_height);

    var width_counter = 1;
    var height_counter = 1;

    var area = width_offset * height_offset;                

    if (position['top'] < image_height-1 && position['left'] < image_width) {
        for (counter = 0; counter < area; counter++) {       
            var pos = [position['left']+width_counter, position['top']+height_counter];

            var index = positions.findIndex(function(item) {
              // return result of comparing `data` with `item`

              // This simple implementation assumes that all `item`s will be Arrays.
              return pos.length === item.length &&
                     item.every(function(n, i) { return n === pos[i] });
            });

            if (index > -1) {
                positions_clone.splice(index, 1);
            }

            area_grid.push(pos);

            width_counter += 1;

            if (width_counter == width_offset) {
                width_counter = 1;
                height_counter += 1;
            }

            if (counter%100 == 0) {
                var percentage = Math.round((counter/area)*100, 2);
                console.log("Percentage: "+percentage+"%");
            }
        }
        console.log(positions_clone.length);
        console.log(area_grid.length);

        areas[area_counter] = {'area': area_grid, 'positions': positions_clone};
        parent.find('.area').text(area_counter);
        area_counter += 1;
    }               


});

问题是当我现在使用这些位置渲染图像时，偏移位置或缺少位置。如图中所示。 original image first example