从画布图像中获取像素值，CORS限制

本文介绍了从画布图像中获取像素值，CORS限制的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

所以显然这是一个问题，一些浏览器，因为我尝试了一些关于画布被污染mumbo jumbo的命中，当你尝试从画布图像获取像素数据，如：

var pix = context.getImageData（3200,3200,1,1）.data;

到目前为止，我已经尝试过crossorigin = '和XMLHttpRequest，但我仍然得到相同的问题。然后再次，我不知道我是否实施它错了，只是一个noob。我将非常感谢，如果有人可以请帮助我这个问题。奋斗与它1.5天，之前转向论坛问题作为最后的手段。请注意，我的代码适用于Firefox浏览器，但不是Chrome ...它的关键是我的实现具有跨浏览器功能。这是一个小的JavaScript代码，我从我的主要项目中提取，以隔离，并尝试和解决问题：

  html> 
< head> 
< / head> 
< body> 
< canvas id =myCanvaswidth =6029height =6968>< / canvas> 
< script> <！ -  Javascript section  - > 
 
 var canvas = document.getElementById（'myCanvas'）; //通过标识从html代码获取画布
 
 var context = canvas.getContext（'2d'）; //获取画布上下文
 var imageObj = new Image（）; // create image object 
 imageObj.src ='gauteng.png'; //定义图像对象的图像
 
 
 imageObj.onload = function（）//图像在图像对象中加载后触发函数
 {
 try 
 {
 context.drawImage（imageObj，0,0）; //将图像对象绘制到画布的上下文上
 
 var imgd = context.getImageData（3200,3200,1,1）; //在x coord 3200处获取像素，y coord 3200 
 var pix = imgd.data; //从像素获取RGB值
 
 //使用alert 
打印出RGB值alert（'R val ='+ pix [0] .toString（）+\r\\ \\ nG val =+ pix [1] .toString（）+\r\\\
B val =+ pix [2] .toString（））; 
 
} 
 catch（err）//如果抛出异常，显示错误消息
 {
 alert（err.toString（））; 
} 
}; 
 
< / script> 
< / body> 
< / html>

我还可以包括我的XMLHttpRequest方法：

  imageObj.onload = function（）{
 
 try 
 {
 var inputFile = new XMLHttpRequest 
 inputFile.open（'get'，'gauteng.png'，true）; //打开示例文件
 
 inputFile.onreadystatechange = function（）
 {
 if（inputFile.readyState == 4）//文档准备解析
 { 
 context.drawImage（imageObj，0，0）; 
 
 //像素位置from image 
 var imgd = context.getImageData（3200,3200,6029,6968）; 
 var pix = imgd.data; 
 
 alert（pix [0] .toString（）++ pix [1] .toString（）++ pix [2] .toString（））; 
} 
} 
 
 inputFile.send（null）; //完成后关闭文件
 
} 
 catch（err）{alert（err.toString（））;} 
};先感谢您。
 
  解决方案
当它是跨源的，你正在使用画布很多问题都通过这样解决：
  imageObj.crossOrigin ='anonymous'; 
 //在设置src之前必须设置crossOrigin属性。 
  
希望它有帮助
 
so obviously this is quite a problem with some browsers, because I googled a number of hits regarding the "canvas gets tainted" mumbo jumbo when you try and get pixel data from canvas images, like : 
var pix = context.getImageData(3200,3200,1,1).data;
So far I already tried the crossorigin = '' and XMLHttpRequest, but I still get the same problem. Then again, I don't know if I'm implementing it wrong and just being a noob. I will greatly appreciate it if someone could please help me with this problem. Struggling with it 1.5 days, before turning to a forum question as last resort. Note that my code works for Firefox browsers, but not for Chrome... It his crucial that my implementation has cross-browser functionality. This is a small javascript code snipped I extracted from my main project to isolate, and try and fix, the problem:
<html>
<head>
  </head>
    <body>
      <canvas id="myCanvas" width="6029" height="6968"></canvas>
      <script>  <!-- Javascript section-->

      var canvas = document.getElementById('myCanvas'); //get canvas from html code via identity

      var context = canvas.getContext('2d');    //get context of canvas
      var imageObj = new Image();       //create image object
      imageObj.src = 'gauteng.png'; //define the image of the image object


      imageObj.onload = function()  //trigger function after the image has loaded in image object
      {
        try
        {
          context.drawImage(imageObj,0,0);  //draw the image object onto context of canvas

          var imgd = context.getImageData(3200,3200,1,1);   //get pixel at x coord 3200, and y coord 3200
          var pix = imgd.data;  //get the RGB values from pixel

          // print out RGB values with alert
          alert('R val= '+pix[0].toString()+ "\r\nG val= "+pix[1].toString()+"\r\nB val= "+pix[2].toString());

        }
        catch(err)  //display error message if exception is thrown
        {
          alert(err.toString());
        }
     };

     </script>
  </body>
</html>
I can also include my approach for the XMLHttpRequest:
imageObj.onload = function() {

    try
    {
        var inputFile = new XMLHttpRequest();
        inputFile.open('get', 'gauteng.png', true); //open example file

        inputFile.onreadystatechange = function()
        {
            if(inputFile.readyState==4) //document is ready to parse
            {
                context.drawImage(imageObj, 0, 0);

                //pixel location from image
                var imgd = context.getImageData(3200,3200,6029,6968);
                var pix = imgd.data;

                alert(pix[0].toString()+ " "+pix[1].toString()+" "+pix[2].toString());
            }
        }

        inputFile.send(null); //close file after finished

    }
    catch(err){ alert(err.toString());}
  };
Thank you in advance.
 解决方案 
when it is cross origin and you are working with canvas many issues are resolved by this:
imageObj.crossOrigin = 'anonymous';
// crossOrigin attribute has to be set before setting src.
Hope it helps
                        这篇关于从画布图像中获取像素值，CORS限制的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！

PIX

从画布图像中获取像素值，CORS限制

问题描述