js 显示tfjs输出的图像矩阵

原文链接: js 显示tfjs输出的图像矩阵

上一篇: js 显示矩阵形式的图片

下一篇: sklearn video 视频处理 对比opencv

使用js原生方法将tfjs输出的矩阵转化为图像显示在canvas中

class Mat {
  constructor(__row, __col, __data) {
    this.row = __row || 0;
    this.col = __col || 0;
    this.channel = 4;
    this.buffer = new ArrayBuffer(__row * __col * this.channel);
    this.data = new Uint8ClampedArray(this.buffer);
    this.data.set(__data);
    this.type = "CV_RGBA";
  }
}


function imread(__image) {
  let width = __image.width
  let height = __image.height;
  console.log(width, height)
  let canvas = document.createElement('canvas')
  canvas.height = height
  canvas.width = width
  let ctx = canvas.getContext("2d");
  ctx.drawImage(__image, 0, 0);
  let data = ctx.getImageData(0, 0, width, height).data
  console.log(data)
  return new Mat(height, width, data);;
}

function RGBA2ImageData(__imgMat) {
  let width = __imgMat.col
  let height = __imgMat.row
  console.log(width, height)
  let canvas = document.createElement('canvas')
  canvas.height = height
  canvas.width = width
  let ctx = canvas.getContext("2d");
  let imageData = ctx.createImageData(width, height);
  imageData.data.set(__imgMat.data);
  return imageData;
}

export {
  Mat,
  RGBA2ImageData,
  imread,
}

tfjs显示

let canvas = document.getElementById("mix");
tf.browser.toPixels(ret, canvas)

js显示

由于只能显示rgba格式的图像,所以使用tf在channel上加了一层全为255的通道

ret = ret.squeeze(0)
console.log('ret', ret)
ret = ret.clipByValue(0, 255).toInt()
let [h, w, c] = ret.shape
console.log('ret', ret) // (h,w,c)
let a = tf.fill([h, w, 1], 255)
console.log('a', a)
let rgba = tf.concat([ret, a], 2)
console.log('rgba', rgba)
// let data = rgba.flatten().dataSync()
let data = rgba.flatten().arraySync()
console.log(data.length, data[0])
console.log(data)

let canvas = document.getElementById("mix");
// 显示
let mat = new util.Mat(h, w, data)
let img_data = util.RGBA2ImageData(mat)
canvas.height = h
canvas.width = w
let ctx = canvas.getContext("2d")
ctx.putImageData(img_data, 0, 0, 0, 0, w, h)