时间戳

首页 > 解决方案 > 像帧缓冲区这样的画布在 chrome 上工作，但在 Firefox 上不工作

javascript - 像帧缓冲区这样的画布在 chrome 上工作，但在 Firefox 上不工作

问题描述

我尝试使用像帧缓冲区这样的画布，在 chrome 中可以正常工作，但在 Firefox 中不行。火狐高手能看下代码吗？

在 https://github.com/r3www/r3/blob/master/compiler.js 第 445 行。

function r3init() {
    canvas = document.getElementById('canvas');
    ctx = canvas.getContext('2d',{alpha:false,preserveDrawingBuffer:true});
    imageData=ctx.getImageData(0,0,canvas.width, canvas.height);
    buf8=new Uint8ClampedArray(memdata,0,imageData.data.length);

    meminidata=imageData.data.length;// dinamic???
    }

function redraw() { 
    imageData.data.set(buf8);ctx.putImageData(imageData,0,0); 
    }

r3init 设置画布并重绘将帧缓冲区的内存复制到画布。

尝试去 https://rawgit.com/r3www/r3/master/index.html

并点击运行。

谢谢

标签： javascriptgoogle-chromefirefoxcanvas

解决方案

您的问题是，当您放置透明的 ImageData 时，您依赖的是Chrome 错误，它不尊重您的CanvasRenderingContext2DSetting。alpha: false

当您ctx.putImageData(ImageData, x, y)对这样的上下文执行此操作时，算法应忽略 alpha 通道，并且始终完全不透明 => 255。

从规格说明：

因此，这种上下文的位图以不透明黑色而不是透明黑色开始；clearRect() 总是产生不透明的黑色像素，getImageData() 的每四个字节总是 255，putImageData() 方法有效地忽略其输入中的每四个字节，依此类推。

所以，我没有深入挖掘你对这些数据做了什么，但似乎你假设 alpha 通道最初是 0，而实际上它不应该是。

一个简单的解决方法是使用默认的 alpha 集初始化您的上下文。
另请注意，preserveDrawingBuffer 是一个 webgl 设置，在 2D 上下文中没有绘图缓冲区。

// alpha for everyone
ctx = canvas.getContext('2d');

对当前损坏的 Chrome 进行简单测试（至少 v69.0.3497）

const alpha = document.createElement('canvas')
  .getContext('2d');
const opaque = document.createElement('canvas')
  .getContext('2d', {
    alpha: false
  });
// a transparent ImageData
const transp = alpha.createImageData(300, 150);
// alpha channel should be ignored
opaque.putImageData(transp,0,0);

const opaque_c = opaque
  .getImageData(0,0,4,4)
  .data[3];
const alpha_c = alpha
  .getImageData(0,0,4,4)
  .data[3]

console.log('opaque', opaque_c); // should be 255
console.log('alpha', alpha_c); // should be 0

推荐阅读