У меня достаточно большой код, покажу самое главное.
img.addEventListener('click', function(e){
// chrome
if(e.offsetX) {x=e.offsetX;y=e.offsetY;}
// firefox
else if(e.layerX) {x=e.layerX;y=e.layerY;}
useCanvas(canvas,img,function(){
// get image data
var p = canvas.getContext('2d').getImageData(x, y, 1, 1).data;
if (valID){val(valID, rgbToHex(p[0],p[1],p[2]));}
});
},false);
function useCanvas(el,image,callback){
el.width = image.width;
el.height = image.height;
el.getContext('2d').drawImage(image, 0, 0, image.width, image.height);
return callback();
}
С картинками которые на сервере скрипт работает хорошо, но когда я пытаюсь загрузить картинку с другого сайта появляется ошибка SecurityError: The operation is insecure.
В этой строчке:
var p = canvas.getContext('2d').getImageData(x, y, 1, 1).data;
Заменил useCanvas на вот такую функцию:
function useCanvas(el,image,callback){
image.crossOrigin = "anonymous"; // This enables CORS
image.onload = function (event) {
el.width = image.width;
el.height = image.height;
el.getContext('2d').drawImage(image, 0, 0, image.width, image.height);
return callback();
}
};
Теперь ошибок нет, но как только я нажимаю на эту фото, оно пропадает. Что я делаю не так?
