Code stoppt nach getImageData

Question

Ich versuche, einen Colorpicker zu machen. Mein Code stoppt nach den getImageData. Ich konnte die Lösung nicht finden ...

Gibt es eine andere Möglichkeit, den Wert des Pixels zu erhalten? Oder das Problem ist, dass ich versuche, einen Link für das Bild zu verwenden?

> function drawImage() { 
>  var image = new Image(); 
>  image.src = imageSrc; 
>  image.onload = function() { 
>  context.clearRect(0, 0, canvas.width, canvas.height); 
>  context.drawImage(image, 0, 0, image.width, image.height); 
> 
>  $('#cPicker').mousemove(function(e) { 
>   if (previewOn)       
>   { 
>   var canvasOffset = $(canvas).offset(); 
>   var x = Math.floor(e.pageX - canvasOffset.left); 
>   var y = Math.floor(e.pageY - canvasOffset.top); 
> 
>   alert(x + ', ' + y); 
>   
>   var imageD = context.getImageData(x, y, 1, 1); 
>   var pixel = imageD.data; 
>    
>   var pixelColor = 'rgb(' + pixel[0] + ', ' + pixel[1] + ', ' + pixel[2] + ')'; 
>   $('preview').css('backgroundColor', pixelColor); 
> 
>   $('#rValue').val(pixel[0]); 
>   $('#gValue').val(pixel[1]); 
>   $('#bValue').val(pixel[2]); 
>   $('#rgbValue').val(pixel[0]+','+pixel[1]+','+pixel[2]); 
> 
>   var dColor = pixel[2] + 256 * pixel[1] + 65536 * pixel[0]; 
>   $('#hexValue').val('#' + ('0000' + dColor.toString(16)).substr(-6)); 
>   }; 
>  }); 
> 
>  $('#cPicker').click(function(e) { 
>   previewOn = !previewOn; 
>  }); 
>  }; 
    }; 

Answer 1

Scheint wie ein Duplikat: Saving canvas with CanvasRenderingContext2D filter

Ich habe auch eine Geige für die Prüfung: https://jsfiddle.net/k6Laknva/1/

var imageSrc = "https://jsfiddle.net/img/logo.png"; 
var canvas = document.getElementById('canvas'); 
var context = canvas.getContext('2d'); 
var previewOn = true; 

function drawImage() { 
    var image = new Image(); 
    image.src = imageSrc; 
    image.onload = function() { 
     context.clearRect(0, 0, canvas.width, canvas.height); 
     context.drawImage(image, 0, 0, image.width, image.height); 

     $('#cPicker').mousemove(function(e) { 
     if (previewOn) { 
      var canvasOffset = $(canvas).offset(); 
      var x = Math.floor(e.pageX - canvasOffset.left); 
      var y = Math.floor(e.pageY - canvasOffset.top); 

      console.log(x + ', ' + y); 

      var imageD = context.getImageData(x, y, 1, 1); 
      var pixel = imageD.data; 

      var pixelColor = 'rgb(' + pixel[0] + ', ' + pixel[1] + ', ' + pixel[2] + ')'; 
      $('preview').css('backgroundColor', pixelColor); 

      $('#rValue').val(pixel[0]); 
      $('#gValue').val(pixel[1]); 
      $('#bValue').val(pixel[2]); 
      $('#rgbValue').val(pixel[0]+','+pixel[1]+','+pixel[2]); 

      var dColor = pixel[2] + 256 * pixel[1] + 65536 * pixel[0]; 
      $('#hexValue').val('#' + ('0000' + dColor.toString(16)).substr(-6)); 
     }; 
     }); 

     $('#cPicker').click(function(e) { 
     previewOn = !previewOn; 
     }); 
    }; 
    }; 

    drawImage(); 

Das läuft gut in Chrome 56, aber nicht in Firefox 52:/