Захват определенной области экрана в браузере

#javascript #vue.js #html2canvas

Вопрос:

Я использовал html2canvas и работал с этим примером https://codepen.io/csakis/pen/bGNpgJK , и я реализовал весь свой код, но у меня были ошибки, и он показал мне пустую страницу. Что мне нужно сделать, так это сделать скриншот только той части экрана, где изображена фигура, сделанная с помощью SVG-кода, и загрузить ее в формате jpg/png через браузер. Есть какие-нибудь предложения? Есть ли какой-нибудь шанс сделать это с vue.js вместо jQuery?

Это часть моего кода:

 import html2canvas from 'html2canvas'

export default{
    data() {
    return {
    crosshairs: "",
    overlay: "",
    tooltip:"",
    screenshot:"",
    TOOLTIP_MARGIN:"",
    }
    },

screenshot: new Vue({
el: "#screenshot",

TOOLTIP_MARGIN:  window.getComputedStyle(document.querySelector(".tooltip")).margin.split("px")[0],