getImageDataの後にコードが停止する

Question

私はカラーピッカーを作成しようとしています。私のコードは何とかgetImageDataの後で停止します。私は解決策を見つけることができませんでした...

は、ピクセルの値を取得するための別の方法はありますか？ または、問題は私が画像のリンクを使用しようとしていることですか？

> 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

の重複ように思える：Saving canvas with CanvasRenderingContext2D filter

私もテストのためのフィドルを作成：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(); 

これは、クロム56で細かい動作しますが、Firefoxの52で失敗：/