0
J'utilise un code qui détecte la couleur d'un pixel sur le clic, ça fonctionne bien ... Mais, après recharger la page web, il cesse de fonctionner, je vu un comportement étrange, il semble que le script est ajouté au DOM après le charger. Pouvez-vous m'aider?jQuery/code Javascript ne fonctionne pas après rechargement (Pixel Color Detection)
<script>
function rgbaToHex (r,g,b,a) {
return ('#' + r.toString(16) + g.toString(16) + b.toString(16) + (a * 255).toString(16).substring(0,2));
}
(function($){
\t $.fn.canvasify = function(f){ // faster than dynamically converting a pixel at a time
\t \t return this.map(function(){
\t \t \t if (this.nodeName=="IMG"){
\t \t \t \t var canvas=$('<canvas>');
\t \t \t \t this.src = this.src; // IE fix
\t \t \t \t $(this).one('load',function(){
\t \t \t \t \t canvas.attr({width:this.width,height:this.height});
\t \t \t \t \t canvas[0].getContext('2d').drawImage(this,0,0,this.width,this.height);
\t \t \t \t \t $(this).replaceWith(canvas);
\t \t \t \t })
\t \t \t \t return canvas[0];
\t \t \t }else{
\t \t \t \t return this;
\t \t \t }
\t \t })
\t }
\t function Rgba(rgba){
\t \t this.rgba = rgba;
\t \t this.toString = function(){ return "rgba("+Array.prototype.join.call(this.rgba,',')+")" };
\t }
\t $.Event.prototype.rgba=function(){
\t \t var x = this.offsetX || (this.pageX - $(this.target).offset().left),
\t \t \t y = this.offsetY || (this.pageY - $(this.target).offset().top),
\t \t \t nodeName = this.target.nodeName
\t \t if (nodeName==="CANVAS")
\t \t \t return new Rgba(this.target.getContext('2d').getImageData(x,y,1,1).data);
\t \t else if (nodeName==="IMG"){
\t \t \t var canvas=document.createElement("canvas");
\t \t \t canvas.width=1;
\t \t \t canvas.height=1;
\t \t \t canvas.getContext('2d').drawImage(this.target,x,y,1,1,0,0,1,1);
\t \t \t return new Rgba(canvas.getContext('2d').getImageData(0,0,1,1).data);
\t \t } else return null;
\t }
})(jQuery)
\t jQuery(function() {
\t \t jQuery('#ImgMap').children('img').eq(0).canvasify().live("click", demo);
\t \t \t function demo(e){
\t \t \t var rgba = e.rgba();
\t \t \t var hex = rgbaToHex(rgba.rgba[0],rgba.rgba[1],rgba.rgba[2],rgba.rgba[3]);
\t \t \t if(hex == "#f38567fe") {
\t \t \t \t console.log("Orange");
\t \t \t \t var htmlString = '<h1 style="text-align: center;"><strong><span style="color: #20587e;">Orange</span></strong></h1> <p style="text-align: center;">Orange Orange.</p> <p style="text-align: center;">This also means they can be difficult to pronounce for beginners.</p>';
\t \t \t \t jQuery("#Text_Country").html(htmlString);
\t \t \t }
\t \t \t if(hex == "#737097fe") {
\t \t \t \t console.log("Purple");
\t \t \t \t var htmlString = '<h1 style="text-align: center;"><strong><span style="color: #20587e;">Purple</span></strong></h1> <p style="text-align: center;">Orange Orange.</p> <p style="text-align: center;">This also means they can be difficult to pronounce for beginners.</p>';
\t \t \t \t jQuery("#Text_Country").html(htmlString);
\t \t \t }
\t \t \t if(hex == "#68c08cfe") {
\t \t \t \t console.log("Green");
\t \t \t \t var htmlString = '<h1 style="text-align: center;"><strong><span style="color: #20587e;">Green</span></strong></h1> <p style="text-align: center;">Orange Orange.</p> <p style="text-align: center;">This also means they can be difficult to pronounce for beginners.</p>';
\t \t \t \t jQuery("#Text_Country").html(htmlString);
\t \t \t }
\t \t \t if(hex == "#ffe275fe") {
\t \t \t \t console.log("Yellow");
\t \t \t \t var htmlString = '<h1 style="text-align: center;"><strong><span style="color: #20587e;">Yellow</span></strong></h1> <p style="text-align: center;">Orange Orange.</p> <p style="text-align: center;">This also means they can be difficult to pronounce for beginners.</p>';
\t \t \t \t jQuery("#Text_Country").html(htmlString);
\t \t \t }
\t \t \t //console.log(rgba.rgba[0]);
\t \t \t //console.log(e);
\t \t \t //console.log(rgbaToHex(rgba.rgba[0],rgba.rgba[1],rgba.rgba[2],rgba.rgba[3]));
\t \t }
\t });
\t
</script>