我正在编写一个javascript代码，其中图像会更改用户指定的颜色。。代码在我这边是完整的。。但奇怪的是，mozilla在清除缓存时抛出错误IndexSizeError: Index or size is negative or greater than the allowed amount，下次运行良好。。在chrome上它根本不运行。。上面写着Uncaught SecurityError: Failed to execute 'getImageData' on 'CanvasRenderingContext2D': the canvas has been tainted by cross-origin data.
我不确定是什么问题，因为我花了3-4个小时调试它，但我做不到。所以我不得不来这里。。
如果这是一个可以解决的错误，请告诉我。
代码：
<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>
编辑：现在的主要问题是铬上的Uncaught SecurityError: Failed to execute 'getImageData' on 'CanvasRenderingContext2D': the canvas has been tainted by cross-origin data.。
您很可能从本地"file://"协议或外部站点加载图像。如果您提供的代码包含实际的链接引用，那么您可能正在执行前者。
浏览器会认为这是与CORS(跨源资源共享)相关的安全风险，并会抛出一个错误，因为由于使用getImageData()和toDataURL()的安全性，我们不允许操作像素缓冲区。
作为一个解决方案，您必须在localhost/127.0.0.1地址上运行页面。如果你还没有，你可以安装一个简单的轻量级服务器，比如Mongoose。
如果你已经这样做了(或使用了类似的东西)，那么你需要通过在图像标签中添加以下属性来请求图像的跨原点使用：
<img src="..." ... crossOrigin="anonymous" />
为了实现这一点，另一端的服务器必须接受这种使用，它通过提供特殊的标头来实现(如果没有，则需要在服务器上配置)。如果它没有或你没有访问远程服务器的权限，除了通过服务器上的页面代理加载图像外，你将无法将图像用于此目的。