webdnn/image

First, this method loads specified image resource. The behavior of this method depends on the image argument.

• If image is an instance of string, it will be regarded as image url, and this method fetches that url.

• If image is an instance of HTMLInputElement, it will be regarded as file input, and this method loads the selected image file.

• Otherwise, image will be regarded as drawable object.

Then, loaded images are packed into typed array based on options argument.

• The image is cropped based on {srcX, srcY, srcW, srcH}. As default, entire image is used.

• The image is resized and translated into {dstX, dstY, dstW, dstH}. As default, no resize and translation is performed.

• options.type is the type of packed typed array. As default, Float32Array is used.

• options.color is the color format of packed typed array. As default, RGB is used.

• options.order is the data order of packed typed array. As default, HWC is used.

• options.bias is the bias value. If specified, this method subtracts this value from original pixel value.

• options.scale is the scale value. If specified, original pixel values are divided by this value. options.scale and options.bias is used for converting pixel value x and packed value y as follows:

  • y = (x - bias) / scale
  • x = y * scale + bias
  • Note that color order is always RGB, not BGR.

Examples

• Load image of specified url

  let image = await WebDNN.Image.load('./cat.png');
  

• Load image selected in file input and resize it into 224 x 224

  let input = document.querySelector('input[type=file]');
  let image = await WebDNN.Image.load(input, { dstW: 224, dstH: 224 });
  

• Load image data from canvas, normalize it into range [-1, 1). In this case, normalized value y can be calculated from pixel value x as follows: y = (x - 128) / 128.

  let canvas = document.getElementsByTagName('canvas')[0];
  let image = await WebDNN.Image.load(canvas, { bias: [128, 128, 128], scale: [128, 128, 128] });
  

Examples

• Show DNN model's result

  let runner = await WebDNN.load('./model');
  let output = runner.outputs[0];
  
  await runner.run();
  
  WebDNN.Image.setImageArrayToCanvas(output.toActual(), 256, 256, document.getElementById('canvas'))
  

• Generally image generation model's result contains noise pixel at their edge because of convolution's padding. In follow example, these noise are cut off.

  WebDNN.Image.setImageArrayToCanvas(output, 256, 256, canvas, {
     srcX: 16, srcY: 16, srcH: 256-16*2, srcW: 256-16*2, // Discard both ends 16px
     dstW: 256, dstH: 256  // Resize cropped image into original output size.
  });