Question

我想做什么：

在我的画布上绘制图像
获取画布上的像素数据
对于像素数据中的每个像素，如果像素是完全白色（RGB值为255,255,255），则将其存储在一个数组中，这样我最终会得到画布上每个白色像素所在的位置数组

我的问题是：

在第2步，当我尝试从画布获取像素数据时，它会抛出以下错误：

  Uncaught DOMException: Failed to execute 'getImageData' on 'CanvasRenderingContext2D': The canvas has been tainted by cross-origin data.

详细说明：

所以我有2个脚本：main.js和ParticleTitle.js 所有我在main.js中做的是初始化画布（设置它的大小和不是），然后创建一个ParticleTitle对象并解析画布上下文以及我想要图像的宽度和高度。

ParticleTitle.js脚本如下所示：

var ParticleTitle = 
{
ctx: null,
title_img: null,
width: null,
height: null,
possiblePxs: Array(),


Create: function(ctx_,w,h)
{
    var obj = Object.create(this);
    obj.ctx = ctx_;
    obj.width = w * (obj.ctx.canvas.width);
    obj.height= h * (obj.ctx.canvas.height);
    obj.title_img = new Image();
    obj.title_img.src = "imgres/up_arrow.png";
    obj.init();
    return obj;
},

init: function()
{
    this.ctx.save();
    this.ctx.translate(this.ctx.canvas.width/2,this.ctx.canvas.height/2);
    this.ctx.drawImage(this.title_img,-this.width/2,-this.height/2,this.width,this.height); 
    this.ctx.restore();

    var pixelData =     
  this.ctx.getImageData(0,0,this.ctx.canvas.width,this.ctx.canvas.height); 
 //error thrown here

    },


Update: function()
{

},
};

所有“创建”功能都是：初始化上下文，计算图像的宽度和高度，初始化图像，然后运行init函数

然后，init函数将图像绘制到画布上然后，当我尝试使用“getImageData”函数时，我会抛出错误。

任何人都知道什么是错的以及我如何解决它？感谢。

javascript canvas getImageData错误

0 个答案: