html2canvas works on jsfiddle but doesn't work on my site-CodePudding

based on https://jsfiddle.net/Sq7hg/3120/
it's pure JS - without any library - but it works on jsfiddle
on my site - and also here - it doesn't work
I'm getting error - html2canvas is not defined
please help

html2canvas([document.getElementById('mydiv')], {
    onrendered: function (canvas) {
        document.getElementById('canvas').appendChild(canvas);
        var data = canvas.toDataURL('image/png');
        var image = new Image();
        image.src = data;
        document.getElementById('image').appendChild(image);
    }
});

#mydiv {
    background-color: lightblue;
    width: 100px;
    height: 100px
}

<div id="mydiv"><p>text!</p></div>
<br><br>
 <div id="canvas"><p>Canvas:</p></div>
 <div id="image"><p>Image:</p></div>

CodePudding user response：

it seems that you are not importing html2canvas anywhere. You can have a look at the docs and follow along.

You will need to add an import in your js.

import html2canvas from 'html2canvas';

As the docs state, this is if you installed it via npm in your project.