48

I want to use html2canvas JS library in my application. I were able to use older versions of html2canvas in my application by directly loading html2canvas.js file in my HTML file.

But newer versions are supported only through npm packages.

When I try to include newer html2canvas.js in my HTML file, it says

html2canvas is not defined

I had tried to modify html2canvas.js file, so that I can directly use it in my HTML file, without using any other package manager or other dependencies.

I had downloaded html2canvas from here. I am unbale to use it by loading this file directly in HTML file. as below

<script type="text/javascript" src="js/html2canvas.js"></script>
Anil Agrawal
  • 2,748
  • 1
  • 24
  • 31
  • 1
    npm install and you can reference through the node_modules folder. Open it up, find the package you're interested in, and run the target file it in a script tag. Something like thing: `` – Jacob Penney Dec 13 '19 at 06:26
  • It was just a typo while composing this question. Actually my application is static HTML application. I am not using any npm, nodejs stuff at all. I had downloaded html2canvas from given link and I want to use it directly in my HTML as before (older versions of html2canvas) – Anil Agrawal Dec 13 '19 at 06:29
  • You can still use npm with static html applications. See Anthony's answer. – Jacob Penney Dec 13 '19 at 06:34
  • Maybe this could help `https://wesbos.com/javascript-modules/` – sujeet Dec 13 '19 at 06:34
  • I don't think your way to use this file is quite right; have you seen this? https://github.com/niklasvh/html2canvas/blob/master/examples/existing_canvas.html – tinwan Dec 13 '19 at 09:06
  • can you show all your code of this page? – tinwan Dec 13 '19 at 09:23

2 Answers2

39

Package installed by npm is located in /node_modules/ which cannot be used by front end directly. To use those modules, you need to use ES6 syntax and import them by using the following code:

// Just an example, you need to read the doc to see how to import
import html2cavas from "html2cavas"

However, browser cannot read ES6 syntax directly. As a result, you need to use Babel to transpile your ES6 code to normal JS code. See https://hackernoon.com/use-es6-javascript-syntax-require-import-etc-in-your-front-end-project-5eefcef745c2

After you transpiled your code, use the <script> tag to import the transpiled code.

Alternatively, you might be able to copy what you need from /node_modules/ and copy it to your js folder. However it is not recommended.

Pang
  • 9,564
  • 146
  • 81
  • 122
Anthony Poon
  • 837
  • 6
  • 14
  • 7
    This answer gave me good insight, would be nice if someone wants to take a stab at summarizing the article with an example. – Llama D'Attore Sep 27 '20 at 07:38
  • 1
    So the only way to use an npm_module is to first install Babel and then import the module using its import statement? Is there really no other way of using an npm_module? I mean how did people manage to use npm_module`s before Babel was released? – Ndrslmpk Jun 12 '22 at 12:25
  • This is the only proper way. Maybe there are work around out there, but you might open up a can of worm. For example, one way I think think of is creating a symlink from your node_modules to your public file. But this is insecure, and might not work. – Anthony Poon Jun 30 '22 at 11:27
5

You can use the CDN for such library. In this case, check here: https://cdnjs.com/libraries/html2canvas

You should find one for production and regular development there. (https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.js) =>development

<script>
  const htmlCanvas = require("htmlcanvas")
</script>
Tolumide
  • 944
  • 9
  • 11
  • Older versions are supported as I mentioned in my question. But newer releases are not working like this. – Anil Agrawal Dec 13 '19 at 06:30
  • Hello Agrawal, You could use the dropdown on the version select of the page but the latest one with a cdn is the 0.0.5 which might nit be what you need. – Tolumide Dec 13 '19 at 06:35
  • 1
    CDN is not the only way to use such JS libraries. I am using offline file that is downlaoded from html2canvas official release page ie. https://github.com/niklasvh/html2canvas/releases – Anil Agrawal Dec 13 '19 at 06:39
  • I'd upvote this if it said "you can" instead of "you would usually", because it depends on the use case. unpkg will serve the latest version: https://www.unpkg.com/html2canvas – ggorlen Jul 01 '21 at 14:51