How do I import tiff.js to my Vue project?

Question

I want to view the .tif file in my Vue, so I try to use the tiff.js.
I try it in a "test.html" and use this to import the tiff.min.js.

<script src="./tiff.min.js">
</script>

However, there is no export from tiff.min.js so I don't know how to import that to my vue-cli.

<script>
export default ({
    name:"test",
    methods:{
        show(file){
            var reader = new FileReader();
  reader.onload = (function (theFile) {
    return function (e) {
      var buffer = e.target.result;
      var tiff = new Tiff({buffer: buffer});
      var canvas = tiff.toCanvas();
      var width = tiff.width();
      var height = tiff.height();
      if (canvas) {
        $('#output').empty().append(canvas);
      }
    };
    })(file);
    reader.readAsArrayBuffer(file);
        }

    
    }
})
</script>

there is something wrong:"Could not find name 'Tiff'. Did you mean 'tiff'?Vetur(2570)"

I know how to import a XXX.js that has "export default"to a vue component, but the tiff.js doesn't have, so how to do that — DRoseGao, Nov 04 '21 at 01:51

score 0 · Answer 1 · answered Nov 03 '21 at 15:51

0

I think your problem is addressed in this StackOverflow question if you want to import the js file in your Vue component Importing javascript file for use within vue component

or your other options could be https://github.com/photopea/UTIF.js or https://github.com/image-js/tiff

answered Nov 03 '21 at 15:51

Jasmin Raval

184
1
5
15

But the tiff.is has no export so I can't import it in the script – DRoseGao Nov 04 '21 at 01:34
the runtime add method will add it like a simple JavaScript source so you can directly use its functionality like a vanilla JavaScript code – Jasmin Raval Nov 10 '21 at 03:47

How do I import tiff.js to my Vue project?

1 Answers1