javascript - 无法渲染 TIFF 图像并将其添加为结构对象

Question

我已阅读教程:http://fabricjs.com/articles以及有关 Fabric 对象的文档。

我能够加载 JPG 和 PNG 图像，但在我的项目中，我需要将 TIFF 图像加载到 Canvas 上并能够在其上应用滤镜。我可以使用 Canvas 上下文渲染 TIFF 图像，但每当调用“renderAll()”时，它都会清除上下文，并且我的 TIFF 图像也会被清除。另外，我无法执行其他操作，如缩放、平移、亮度和对比度，因为我无法渲染它。

有人可以帮助我了解如何将 TIFF 图像转换为 Fabric 对象，以便我可以对其执行所有标准的 Fabric.Object 相关操作。

以下是我遵循的步骤:

1. 为了加载模拟 TIFF 图像，我将其作为数组缓冲区读取。

   public loadMockTiffImage() {
   // Create a new XMLHttpRequest object to read the mock TIFF image as ArrayBuffer
   const xhr = new XMLHttpRequest();
   
   // Configure it: GET-request for the URL
   xhr.open('GET', 'assets/tif/sample.tif', true);
   xhr.responseType = 'arraybuffer';
   xhr.timeout = 10000; // timeout in ms, 10 seconds
   
   // Send the request over the network
   xhr.send();
   
   // After the response is received, load it
   xhr.onload = () => {
     // analyze HTTP status of the response
     if (xhr.status !== 200) {
       // throw error incase status is not 200
       console.log(`Error ${xhr.status}: ${xhr.statusText}`);
     } else {
       // Show the result
       console.log(`Done, got ${xhr.response.byteLength} bytes`);
       console.log(xhr.response);
       // Add to canvas the XHR response which is of type ArrayBuffer
       this.addTiffImageOnCanvas(xhr.response);
     }
   };
   
   // Show progress of loading the bytes
   xhr.onprogress = event => {
     if (event.lengthComputable) {
       console.log(`Received ${event.loaded} of ${event.total} bytes`);
     } else {
       console.log(`Received ${event.loaded} bytes`); // no Content-Length
     }
   };
   
   // Log any network request errors
   xhr.onerror = () => {
     console.log('Request failed!');
   };
   }
   

2. 接下来，我使用 UTIF.js 解码 ArrayBuffer 并将其转换为 ImageBitmap，以便我可以使用 canvas.drawImage() 将其渲染在 Canvas 上。 如何将此 ImageBitmap/ArrayBuffer 转换为 FabricJS 对象？

   private addTiffImageOnCanvas(buffer: ArrayBuffer) {
   // Using UTIF.js to decode the array buffer and convert it to ImageBitmap
   const ifds = UTIF.decode(buffer);
   UTIF.decodeImage(buffer, ifds[0]);
   const timage = ifds[0];
   const array = new Uint8ClampedArray(UTIF.toRGBA8(timage));
   // Forming image Data
   const imageData = new ImageData(array, timage.width, timage.height);
   let ibm: ImageBitmap = null;
   const bmPromise: Promise<ImageBitmap> = createImageBitmap(imageData);
   
   bmPromise.then(bitmap => {
     ibm = bitmap;
     fabric.Image.fromObject(ibm, image => {
        // TODO: How or What should I do now?
     });
   });
   

   }

感谢您的帮助。

Answer 1

我没有在 Fabric 的 github 存储库中找到任何能够处理 ImageBitmap 的内容。

但是，您可以很好地从 HTMLCanvasElement 创建 Fabric.Image。因此，您必须在 Canvas 上绘制此 ImageBitmap，如果我们无论如何都要使用 Canvas ，最好在获得 ImageData 时在上一步中完成此操作:

var scene = new fabric.Canvas('fabric');
scene.setHeight(500);
scene.setWidth(500);

fetch( "https://upload.wikimedia.org/wikipedia/commons/d/d8/Example.tiff" )
  .then( (resp) => resp.arrayBuffer() )
  .then( makeFabricImageFromTiff )
  .then( (fabricImage) => scene.add( fabricImage ) );

function makeFabricImageFromTiff( buffer ) {
  // Using UTIF.js to decode the array buffer and convert it to ImageData
  const ifds = UTIF.decode( buffer );
  UTIF.decodeImage( buffer, ifds[ 0 ] );
  const timage = ifds[ 0 ];
  const array = new Uint8ClampedArray( UTIF.toRGBA8( timage ) );
  // Forming image Data
  const imageData = new ImageData( array, timage.width, timage.height );
  // a temporary canvas element
  const canvas = document.createElement( 'canvas' );
  canvas.width = timage.width;
  canvas.height = timage.height;
  // on which we draw the ImageData
  canvas.getContext( '2d' )
    .putImageData( imageData, 0, 0 );
  // before converting it to a Fabric.Image instance
  return new fabric.Image( canvas, { left: 50, top: 50 } );
}

canvas { border: 1px solid; }

<script src="https://cdn.jsdelivr.net/gh/photopea/UTIF.js/UTIF.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/2.4.4/fabric.min.js"></script>
<canvas id="fabric"></canvas>