Javascript更改图像颜色IndexSizeError:索引或大小为负或大于允许的数量

我正在编写一个javascript代码，其中图像会更改用户指定的颜色。。代码在我这边是完整的。。但奇怪的是，mozilla在清除缓存并在下次正常运行时抛出错误

IndexSizeError:Index或size为负值或大于允许的数量。。在chrome上，它根本不运行。。它显示
Uncaught SecurityError:未能在“CanvasRenderingContext2D”上执行“getImageData”：画布已被跨源数据污染。

我不确定是什么问题，因为我花了34个小时调试它，但我不能。所以我不得不来这里

请让我知道这是否是一个可以解决的错误

代码：

    <ul>
        <li>
            <img src="mug.png" id="mug_image" class="the_image" width="200">
            <input type="text" id="mug_color" value="#6491ee">
            <input type="button" value="change color" class="changeColorButton" id="mug_button"></li>
        <li>
            <img src="rug.png" id="rug_image" class="the_image" width="200">
            <input type="text" id="rug_color" value="#6491ee">
            <input type="button" value="change color" class="changeColorButton" id="rug_button">
        </li>
        <li>
            <img src="rug.png" id="nug_image" class="the_image" width="200">
            <input type="text" id="nug_color" value="#6491ee">
            <input type="button" value="change color" class="changeColorButton" id="nug_button">
        </li>
    </ul>
    <script type="text/javascript">
       $(document).ready(function(){ // Begin scoping function
            var originalPixels = [];
            var currentPixels = [];
            var the_images = $('.the_image');
            var canvas = [];
            var ctx = [];
            $.each(the_images, function(ind, val) {
                var get_id = $(this).attr('id');
                var the_id_arr = get_id.split('_');
                the_id = the_id_arr[0];
                canvas[the_id] = document.createElement("canvas");
                ctx[the_id] = canvas[the_id].getContext("2d");
                originalPixels[the_id] = '0';
                currentPixels[the_id] = '0';
                getPixels(canvas[the_id], ctx[the_id], the_id, val);
            });

            $('.changeColorButton').click(function() {
                var button_id = $(this).attr('id');
                var the_id_arr = button_id.split('_');
                var the_id = the_id_arr[0];
                var the_image = $('#' + the_id + '_image');
                var the_color = the_id + '_color';
                changeColor(canvas[the_id], ctx[the_id], originalPixels[the_id], currentPixels[the_id], the_image.get(0), the_color);
            });

            function HexToRGB(Hex)
            {
                var Long = parseInt(Hex.replace(/^#/, ""), 16);
                return {
                    R: (Long >>> 16) & 0xff,
                    G: (Long >>> 8) & 0xff,
                    B: Long & 0xff
                };
            }

            function changeColor(canvas, ctx, originalPixels, currentPixels, obj, color_id)
            {

                if (!originalPixels)
                    return; // Check if image has loaded
                var newColor = HexToRGB(document.getElementById(color_id).value);
                for (var I = 0, L = originalPixels.data.length; I < L; I += 4)
                {
                    if (currentPixels.data[I + 3] > 0)
                    {
                        currentPixels.data[I] = originalPixels.data[I] / 255 * newColor.R;
                        currentPixels.data[I + 1] = originalPixels.data[I + 1] / 255 * newColor.G;
                        currentPixels.data[I + 2] = originalPixels.data[I + 2] / 255 * newColor.B;
                    }
                }
                ctx.putImageData(currentPixels, 0, 0);
                obj.src = canvas.toDataURL("image/png");
            }

            function getPixels(canvas, ctx, the_id, img)
            {
                canvas.width = img.width;
                canvas.height = img.height;
                ctx.drawImage(img, 0, 0, img.naturalWidth, img.naturalHeight, 0, 0, img.width, img.height);
                originalPixels[the_id] = ctx.getImageData(0, 0, img.width, img.height);
                currentPixels[the_id] = ctx.getImageData(0, 0, img.width, img.height);
                img.onload = null;
            }
        });
    </script>









$（文档）.ready（函数（）{//开始作用域函数
变量原始像素=[]；
var currentPixels=[]；
var the_images=$（'.the_images'）；
var=[]；
var-ctx=[]；
$.each（图像、函数（ind、val）{
var get_id=$（this.attr（'id'）；
var the_id_arr=get_id.split（“”）；
_id=_id_arr[0]；
canvas[the_id]=document.createElement（“canvas”）；
ctx[the_id]=canvas[the_id].getContext（“2d”）；
原始像素[u id]=“0”；
currentPixels[the_id]=“0”；
getPixels（canvas[the_id]，ctx[the_id]，the_id，val）；
});
$（'.changeColorButton'）。单击（函数（）{
var button_id=$（this.attr（'id'）；
var the_id_arr=按钮_id.split（“”）；
var the_id=the_id_arr[0]；
var the_image=$（“#”+the_id+“_image”）；
var the_color=_id+“_color”；
changeColor（canvas[the_id]、ctx[the_id]、originalPixels[the_id]、currentPixels[the_id]、the_image.get（0）、the_color）；
});
函数HexToRGB（Hex）
{
var Long=parseInt（十六进制替换（/^#/，“”），16）；
返回{
R：（长>>>16）和0xff，
G:（长>>>8）和0xff，
B:Long&0xff
};
}
函数changeColor（画布、ctx、原始像素、当前像素、obj、颜色标识）
{
如果（！原始像素）
return；//检查图像是否已加载
var newColor=HexToRGB（document.getElementById（color\u id）.value）；
对于（变量I=0，L=originalPixels.data.length；I0）
{
currentPixels.data[I]=originalPixels.data[I]/255*newColor.R；
currentPixels.data[I+1]=originalPixels.data[I+1]/255*newColor.G；
currentPixels.data[I+2]=原始像素.data[I+2]/255*newColor.B；
}
}
ctx.putImageData（当前像素，0,0）；
obj.src=canvas.toDataURL（“image/png”）；
}
函数getPixels（画布、ctx、_id、img）
{
canvas.width=img.width；
canvas.height=img.height；
ctx.drawImage（img，0，0，img.naturalWidth，img.naturalHeight，0，0，img.width，img.height）；
原始像素[u id]=ctx.getImageData（0，0，img.width，img.height）；
currentPixels[the_id]=ctx.getImageData（0，0，img.width，img.height）；
img.onload=null；
}
});

编辑：现在的主要问题是
未捕获的安全性错误：未能在“CanvasRenderingContext2D”上执行“getImageData”：画布已被跨源数据污染。
在chrome上。
您很可能从本地“
文件：//
”协议或外部站点加载图像。如果您提供的代码包含实际的链接引用，那么您可能正在执行前者

浏览器会认为这是与（跨源资源共享）相关的安全风险，由于使用<代码> GeMimaGeDATA（）/<代码>和<代码> toDATOLL（）/<代码> < < /P>，由于安全性，我们不允许操作像素缓冲区。
作为解决方案，您必须在localhost/127.0.0.1地址运行页面。如果您还没有安装，您可以安装一个简单的轻量级服务器，例如
如果您已经这样做（或使用类似的东西），则需要通过将此属性添加到图像标记来请求图像的跨原点使用：

<img src="..." ... crossOrigin="anonymous" />



要使其正常工作，另一端的服务器必须通过提供特殊头（如果不是，则需要在服务器上配置）来接受此使用。如果它没有或您没有访问远程服务器的权限，则除了通过服务器上的页面代理加载图像外，您将无法将图像用于此目的。
您很可能从本地“
文件：//
”协议或外部站点加载图像。如果您提供的代码包含实际的链接引用，那么您可能正在执行前者

浏览器会认为这是与（跨源资源共享）相关的安全风险，由于使用<代码> GeMimaGeDATA（）/<代码>和<代码> toDATOLL（）/<代码> < < /P>，由于安全性，我们不允许操作像素缓冲区。
作为解决方案，您必须在localhost/127.0.0.1地址运行页面。如果您还没有安装，您可以安装一个简单的轻量级服务器，例如
如果您已经这样做（或使用类似的工具），那么您需要请求cro