我目前正在编写一个小绘图应用程序,该应用程序需要访问其涂抹和模糊工具的像素数据,并且在 Firefox 中遇到了 HTML5 Canvas API 的一个令人讨厌的问题。显然,它并没有完全按照规范中的定义实现 getImageData。该规范特别指出“......画布外的像素必须返回为透明黑色......”。
这在 FF 中不会发生(在 FF 3.6 和 4 beta 9 中测试)。相反,它会给出这样的错误:指定了无效或非法的字符串”代码:“12
请注意,这似乎可以在 Chrome 中正常工作。
我想这意味着我将不得不实现一些额外的代码来解决这个限制。我设法使用以下代码绕过了这个问题:
getImageDataAround: function(p, r) {
p = this._toAbsolute(p);
r = this._toAbsolute(r);
p = p.sub(r);
var d = r * 2;
var width = d;
var height = d;
// XXX: FF hack
if(navigator.userAgent.indexOf('Firefox') != -1) {
if(p.x < 0) {
width += p.x;
p.x = 0;
}
if(p.y < 0) {
height += p.y;
p.y = 0;
}
var x2 = p.x + width;
if(x2 >= this.width) {
width = d - (x2 - this.width);
}
var y2 = p.y + height;
if(y2 >= this.height) {
height = d - (y2 - this.height);
}
if((width != d) || (height != d)) {
// XXX: not ideal but at least this won't give any
// errors
return this.ctx.createImageData(d, d);
}
}
return this.ctx.getImageData(p.x, p.y, width, height);
},
这并不酷,因为我将一堆空像素返回给调用者。就像在规范中一样返回结果会更好。
只是为了澄清代码是 Context API 的一部分,它包装了真实的上下文并提供了一些额外的功能(相对坐标等)。这可能解释了 this.width 等内容的来源。
麻烦的是XXX部分。我只需要某种方法来返回符合规范的 ImageData。欢迎任何关于如何做到这一点的想法。:)