使用 camera 截图 截出的图片 变灰而且模糊

Creator 2.x
#1

  • Creator 版本：2.1.2

  • 目标平台： Web

  • 详细报错信息，包含调用堆栈：

  • 重现方式：
    // 设置相机参数
    let camera = this.getComponent(cc.Camera);
    if(!camera){
    camera = this.addComponent(cc.Camera);
    }
    camera.enabled = false; // 避免自动渲染
    // 截图的缩放比例
    var zoom = 3;
    // 截图的尺寸，本例是640x640的正方形截图
    // 如果是全屏，则为 cc.winSize.width, cc.winSize.height
    let width = 486; // cc.winSize.width
    let height = 864; // cc.winSize.height
    let size = cc.size(widthzoom, heightzoom);
    // 截图的中心点就是摄像机节点的位置
    let origin = cc.v2(0, 0);
    camera.zoomRatio = zoom; // 设置缩放
    // 设置目标渲染纹理
    let texture = new cc.RenderTexture();
    texture.initWithSize(size.width, size.height); // 截图矩形的尺寸
    this.node.setPosition(origin); // 截图矩形的中心点
    camera.targetTexture = texture;

      _shot() {

  // 执行一次 render，将所渲染的内容渲染到纹理上
  this._camera.render(undefined);
  // 到这里，截图就已经完成了
  
  // 接下去，可以从 RenderTexture 中获取数据，进行深加工
  let texture = this._texture;
  let data = texture.readPixels();

  let width = texture.width;
  let height = texture.height;

  // 接下来就可以对这些数据进行操作了       
  // let canvas:HTMLCanvasElement;
  let canvas = document.createElement('canvas'); 
  // document.body.appendChild(btn); // 没有添加到body上，不用担心内存泄漏

  let ctx = canvas.getContext('2d');
  canvas.width = width;
  canvas.height = height;

  // 1维数组转2维
  // 同时做个上下翻转
  let rowBytes = width * 4;
  for (let row = 0; row < height; row++) {
      let srow = height - 1 - row;
      let imageData = ctx.createImageData(width, 1);
      let start = srow*width*4;
      for (let i = 0; i < rowBytes; i++) {
          imageData.data[i] = data[start+i];
      }

      ctx.putImageData(imageData, 0, row);
  }

  let dataUrl = canvas.toDataURL("image/jpeg");
  // 显示
  this._showTexture(dataUrl);

    }

  • 出现概率：100%

1赞
#2


#4

并没有效果 感觉像是blend的问题

#5

遇到同样问题，求官方回复~~:smiley:

#6

遇到同样问题，求官方回复

#7

我使用的版本是2.2.0这个问题依然存在

#8

请问解决了吗

#9

请问解决了？