Question

我正在尝试构建一个Web应用程序，它将需要在浏览器中检索和显示TIFF图像。使用tiff.js（https://github.com/seikichi/tiff.js/tree/master）和此处找到的示例项目（https://github.com/johnthad/tiff-demo），我能够使用Chrome Web Server从本地计算机成功检索并显示图像，但只能使用编写的JavaScript客户端。我无法从节点上使它正常工作！设置图像属性时，节点中的相同代码将返回NULL。

这是写到客户端的代码（这可行）：

<!doctype html>
<html>
  <head>
    <title>tiff.js demo</title>
  </head>
  <body>
    <script src="tiff.min.js"></script>
    <script type="text/javascript">

      let loadImage = function (filename) {
        let xhr = new XMLHttpRequest();
        xhr.responseType = 'arraybuffer';
        xhr.open('GET', filename);
        xhr.send();
        xhr.onload = function (e) {
          let tiff = new Tiff({buffer: xhr.response});
          let width = 6 * tiff.width();
          let height = 6 * tiff.height();
          let canvas = tiff.toCanvas();
          if (canvas) {
            canvas.setAttribute('style', 'width:' + (width*0.3) +
              'px; height: ' + (height*0.3) + 'px');
            let elem = document.createElement("div");
            elem.innerHTML ='<div><a href="' + filename + '">' + filename +
                          ' (width: ' + width + ', height:' + height + ')' +
                          '</a></div>';
            document.body.append(elem);
            document.body.append(canvas);
          }
        };
      }

      loadImage('http://127.0.0.1:8887/sample.tif');

    </script>
  </body>
</html>

这是为node.js编写的代码（这不起作用）：

const express = require('express');
const hbs = require('express-handlebars');
const open = require('open')
const path = require('path');
const Tiff = require('tiff.js')
const XMLHttpRequest = require("xmlhttprequest").XMLHttpRequest;

app.use(express.static(path.join(__dirname, 'dist')));
app.use(express.static(path.join(__dirname, 'images')));

app.set('view engine', 'hbs');
app.engine('hbs', hbs({
    extname: 'hbs',
    defaultView: 'default',
    layoutsDir: path.join(__dirname, 'views/pages/'),
    partialsDir: path.join(__dirname, 'views/partials/')
}))

app.get('/', function(req, res) {
    let canvas, elem;
    let loadImage = function (filename) {
        let xhr = new XMLHttpRequest();
        xhr.responseType = 'arraybuffer';
        xhr.open('GET', filename);
        xhr.send();
        xhr.onload = function (e) {
            console.log("------HERE------");
            let image = new Tiff({ buffer: xhr.response });
            let width = 6 * image.width();
            let height = 6 * image.height();
            canvas = image.toCanvas();
            if (canvas) {
                canvas.setAttribute('style', 'width:' + (width*0.3) +
                                    'px; height: ' + (height*0.3) + 'px');
                elem = document.createElement("div");
                elem.innerHTML = '<div><a href="' + filename + '">' + filename +
                                 ' (width: ' + width + ', height:' + height + ')' +
                                 '</a></div>'
                res.render('indexMain', { canvas, elem });
            }
        };
        xhr.onerror = function (e) {
            console.log("DIDN'T WORK!");
        }
    }

    loadImage('http://127.0.0.1:8887/sample.tif');
})

app.listen(port, function(err) {
    if (err) {
        console.log(err);
    } else {
        open('http://localhost:' + port);
        console.log("Server listening on " + port);
    }
})

以下是错误输出：

1.Tiff: Cannot read TIFF header.

/mnt/c/Development/qc_assist/wtv/node_modules/tiff.js/tiff.min.js:104
(module.exports=F);process.on("uncaughtException",function(r){if(!(r instanceof of))throw r;});F.inspect=function(){return"[Emscripten Module object]"}}else if(ah)F.print||(F.print=print),"undefined"!=typeof printErr&&(F.printErr=printErr),F.read="undefined"!=typeof read?read:function(){throw"no read() available (jsc?)";},F.readBinary=function(r){if("function"===typeof readbuffer)return new Uint8Array(readbuffer(r));r=read(r,"binary");fb("object"===typeof r);return r},"undefined"!=typeof scriptArgs?
                                                                                    ^
Tiff.Exception: The function TIFFOpen returns NULL

无法使用node.js检索TIFF，但可以直接从客户端检索TIFF

0 个答案: