getImageData 后代码停止答案

【问题标题】：Code stops after getImageDatagetImageData 后代码停止
【发布时间】：2017-06-28 15:35:26
【问题描述】：

我正在尝试制作一个颜色选择器。我的代码在 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;  
>       });
>     }; 
  };

【问题讨论】：

标签： javascript getimagedata

【解决方案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();

这在 Chrome 56 中运行良好，但在 Firefox 52 中失败：/

【讨论】：