html-images-minifier.js 3.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108
  1. /*
  2. * Copyright 2018 Gildas Lormeau
  3. * contact : gildas.lormeau <at> gmail.com
  4. *
  5. * This file is part of SingleFile.
  6. *
  7. * SingleFile is free software: you can redistribute it and/or modify
  8. * it under the terms of the GNU Lesser General Public License as published by
  9. * the Free Software Foundation, either version 3 of the License, or
  10. * (at your option) any later version.
  11. *
  12. * SingleFile is distributed in the hope that it will be useful,
  13. * but WITHOUT ANY WARRANTY; without even the implied warranty of
  14. * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
  15. * GNU Lesser General Public License for more details.
  16. *
  17. * You should have received a copy of the GNU Lesser General Public License
  18. * along with SingleFile. If not, see <http://www.gnu.org/licenses/>.
  19. */
  20. /* global srcsetParser */
  21. this.imagesMinifier = this.imagesMinifier || (() => {
  22. const EMPTY_IMAGE = "data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==";
  23. return {
  24. process(doc) {
  25. doc.querySelectorAll("picture").forEach(pictureElement => {
  26. const imgElement = pictureElement.querySelector("img");
  27. if (imgElement) {
  28. let srcData = getImgSrcData(imgElement);
  29. let { src, srcset } = srcData;
  30. if (!src) {
  31. const sources = Array.from(pictureElement.querySelectorAll("source")).reverse();
  32. const data = getSourceSrcData(Array.from(sources));
  33. src = data.src;
  34. if (!srcset) {
  35. srcset = data.srcset;
  36. }
  37. }
  38. setSrc({ src, srcset }, imgElement, pictureElement);
  39. }
  40. });
  41. doc.querySelectorAll(":not(picture) > img[srcset]").forEach(imgElement => setSrc(getImgSrcData(imgElement), imgElement));
  42. }
  43. };
  44. function getImgSrcData(imgElement) {
  45. let src = imgElement.getAttribute("src");
  46. if (src == EMPTY_IMAGE) {
  47. src = null;
  48. }
  49. let srcset = getSourceSrc(imgElement.getAttribute("srcset"));
  50. if (srcset == EMPTY_IMAGE) {
  51. srcset = null;
  52. }
  53. return { src, srcset };
  54. }
  55. function getSourceSrcData(sources) {
  56. let source = sources.find(source => source.src);
  57. let src = source && source.src;
  58. let srcset = source && source.srcset;
  59. if (!src) {
  60. source = sources.find(source => getSourceSrc(source.src));
  61. src = source && source.src;
  62. if (src == EMPTY_IMAGE) {
  63. src = null;
  64. }
  65. }
  66. if (!srcset) {
  67. source = sources.find(source => getSourceSrc(source.srcset));
  68. srcset = source && source.srcset;
  69. if (srcset == EMPTY_IMAGE) {
  70. srcset = null;
  71. }
  72. }
  73. return { src, srcset };
  74. }
  75. function setSrc(srcData, imgElement, pictureElement) {
  76. if (srcData.src) {
  77. imgElement.setAttribute("src", srcData.src);
  78. imgElement.setAttribute("srcset", "");
  79. imgElement.setAttribute("sizes", "");
  80. } else {
  81. imgElement.setAttribute("src", EMPTY_IMAGE);
  82. if (srcData.srcset) {
  83. imgElement.setAttribute("srcset", srcData.srcset);
  84. } else {
  85. imgElement.setAttribute("srcset", "");
  86. imgElement.setAttribute("sizes", "");
  87. }
  88. }
  89. if (pictureElement) {
  90. pictureElement.querySelectorAll("source").forEach(sourceElement => sourceElement.remove());
  91. }
  92. }
  93. function getSourceSrc(sourceSrcSet) {
  94. if (sourceSrcSet) {
  95. const srcset = srcsetParser.process(sourceSrcSet);
  96. return (srcset.find(srcset => srcset.url)).url;
  97. }
  98. }
  99. })();