Нужно ли удалять или удалять HTML-элементы, которые я создал, но не прикрепил к DOM? - PullRequest
Новая
       28

Нужно ли удалять или удалять HTML-элементы, которые я создал, но не прикрепил к DOM?

0 голосов
/ 21 мая 2019

Я реализую загрузку на стороне клиента некоторых (Высоких) диаграмм, которые у меня есть.Сейчас я получаю исходный код SVG для диаграмм, создаю элемент canvas и рисую SVG в указанном элементе, а затем загружаю изображение с помощью toBlob / Filesaver.js.См. Код ниже: 

// draw the svg to a canvas
var c = document.createElement("canvas");
canvg(c, file);

// scrape the image from the canvas as png or jpg and download it in full quality
c.toBlob(function (blob) {
  saveAs(blob, fileName);
}, contentType, 1);

Сейчас загрузка работает нормально, как и ожидалось, но кажется, что созданный мною элемент canvas, c, был прикреплен к окну и остается даже после завершения загрузки.

Вызов c.remove() не помогает.c.parentNode и c.parentElement равны нулю (очевидно, поскольку я не прикрепил c к DOM), поэтому я не могу назвать removeChild(c) для чего-либо.

Мне интересно, как я могу удалить/ удалить элемент c?c = undefined/null достаточно хорош?Есть ли более элегантный способ?

Ответы [ 2 ]

2 голосов
/ 21 мая 2019

Как только c выходит из области видимости, он должен автоматически собирать мусор, если canvg не хранит ненужную ссылку на него.

Для обеспеченияc в конечном итоге перестает быть ссылочным, поместите весь код в IIFE: 

(() => {
  // draw the svg to a canvas
  var c = document.createElement("canvas");
  canvg(c, file);

  // scrape the image from the canvas as png or jpg and download it in full quality
  c.toBlob(function (blob) {
    saveAs(blob, fileName);
  }, contentType, 1);
})();

(в противном случае он будет выглядеть как window.c)

0 голосов
/ 21 мая 2019

Да, предыдущий ответ правильный, но вы также можете очистить холст, установив его наименьший размер 

(() => {
     var c = document.createElement("canvas");
      canvg(c, file);
      c.toBlob(function (blob) {
              saveAs(blob, fileName);
              c.width = c.height = 0;
      }, contentType, 1); 
})()
...