javascript - 如何将可自定义的颜色更改框下载为带有背景图像的图像？

Question

我有一个盒子，一旦你选择盒子然后选择颜色，它就可以改变颜色。
但是，还有一个背景图像显示了框的轮廓。我使用 HTML2canvas 和 jquery 作为库，因此我可以将自定义颜色更改框下载为图像，但如果图像被隐藏，则只能在本地下载 - 如 CSS 所示。
我的问题是，如何下载带有背景轮廓框图像的可自定义颜色更改框？ - 或 - 是否有另一种方法可以使用下载按钮在本地保存背景图像和 SVG？

//////// carousel ////////

let sliderImages = document.querySelectorAll('.slide'),
  arrowLeft = document.querySelector('#arrow-left'),
  arrowRight = document.querySelector('#arrow-right'),
  current = 0;

//Clear all images
function reset() {
  for (let i = 0; i < sliderImages.length; i++) {
    sliderImages[i].style.display = 'none';
  }
}
// initialize slider
function startSlide() {
  reset();
  sliderImages[0].style.display = "block";
}

//show previous
function slideLeft() {
  reset();
  sliderImages[current - 1].style.display = "block";
  current--;
}

//show next
function slideRight() {
  reset();
  sliderImages[current + 1].style.display = "block";
  current++;
}

//left arrow click
arrowLeft.addEventListener('click', function() {
  if (current === 0) {
    current = sliderImages.length;
  }
  slideLeft();
});

//right arrow click
arrowRight.addEventListener('click', function() {
  if (current === sliderImages.length - 1) {
    current = -1;
  }
  slideRight();
});

startSlide();

const overlays = [];
document.querySelectorAll(".product").forEach(function(path) {
  path.onclick = chooseProduct;
})

function chooseProduct(e) {
  overlays.push(e.target);
  overlays.forEach((overlay) => overlay.classList.add('highlight'));
}

//////// remove highlight when clicking outside of image ////////
var removeHighlight = function(e) {
  var products = document.querySelectorAll('.product');

  if (!e.target.classList.contains('product') && !e.target.classList.contains('color')) {
    overlays.length = 0;
    document.querySelectorAll('.product').forEach(function(prod) {
      prod.classList.remove('highlight');
    });
  }
}
document.onclick = removeHighlight;

//////// remove highlight of a specific shape ////////
function chooseProduct(e) {
  for (let i = 0; i < overlays.length; i += 1) {
    let currentOverlay = overlays[i];
    if (currentOverlay.isSameNode(e.target)) {
      overlays.splice(i, 1);
      e.target.classList.remove('highlight')
      return;
    }
  }
  overlays.push(e.target);
  overlays.forEach((overlay) => overlay.classList.add("highlight"));
}

//////// get and set colours ////////

// Click on a color
var el = document.getElementsByClassName("color");
for (var i = 0; i < el.length; i++) {
  el[i].onclick = changeColor;
}

function changeColor(e) {
  // get the hex color
  let hex = e.target.getAttribute("data-hex");
  // set the hex color
  overlays.forEach((overlay) => overlay.style.fill = hex);
}

$(document).ready(function() {
  function saveScreenshot(canvas) {
    var downloadLink = document.createElement('a');
    downloadLink.download = 'download.jpg';
    canvas.toBlob(function(blob) {
      downloadLink.href = URL.createObjectURL(blob)
      downloadLink.click();
    });
  }

  $(".download-btn").on("click", function(e) {
    e.preventDefault();
    html2canvas(document.querySelector(".download-container"), {
      scrollX: 0,
      scrollY: 0
    }).then(function(canvas) {
      var image = canvas.toDataURL('image/jpeg');
      document.getElementById("created-element").src = image;
      $(this).attr('href', image);
      saveScreenshot(canvas);
    });
  });
});

.grid-container {
  display: grid;
  grid-template-columns: auto 5% 1fr auto 1fr;
  grid-template-rows: 128px auto 1fr auto auto auto auto 100px;
  gap: 0px 0px;
  grid-auto-flow: row;
  grid-template-areas: 
    "header . . . ." 
    "main main main color-select color-select" 
    "main main main color-select color-select" 
    "about about about about about" 
    "howto howto howto howto howto" 
    "faqs faqs faqs faqs faqs" 
    "social social social social social" 
    "footer footer footer footer footer";
}

.header {
  grid-area: header;
}

.logo {
  display: inline-block;
  padding-top: 20px;
  padding-left: 65px;
}

.navbar {
  display: inline-block;
  padding-top: 50px;
  padding-right: 20px;
  font-family: 'Roboto Condensed', sans-serif;
  line-height: 38px;
  font-weight: 400;
  font-size: 18px;
  float: right;
}

.nav-link {
  margin: 18px;
  color: #212529;
  text-decoration: none;
}

.main {
  grid-area: main;
  background-color: #f8f8f8;
  padding-top: 20px;
  padding-bottom: 50px;
  display: flex;
  text-align: center;
  position: relative;
  margin-top: 2.5px;
  margin-left: 78px;
}

#slider,
.wrap,
.slide-content {
  max-width: 1000px;
  position: relative;
  margin: auto;
}

.slide-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.arrow {
  cursor: pointer;
  position: absolute;
  top: 101%;
  width: 60%;
  height: 0;
  z-index: 1;
  font-size: 20px;
  color: #cccccc;
}

#arrow-left {
  left: 0;
}

#arrow-right {
  right: 0;
}


/* Caption text */

.text {
  position: relative;
  color: #212529;
  font-size: 18px;
  top: 28px;
  width: 100%;
  text-align: center;
  font-family: 'Roboto Condensed', sans-serif;
  font-weight: 400;
}

.lion-number {
  color: #8f8f8f;
}

.color-select {
  display: flex;
  align-items: center;
  grid-area: color-select;
  background-color: #f8f8f8;
  margin-top: 2.5px;
  margin-right: 78px;
  padding: 10px;
}

body,
html {
  margin: 0;
  padding: 0;
  height: 100%;
  width: 100%;
}

#container {
  width: 100%;
  height: auto;
}

#product-svg {
  position: absolute;
  z-index: 2;
  background-size: 100%;
  background-repeat: no-repeat;
  background-position: 50%;
  mix-blend-mode: multiply;
  width: 85%;
  height: auto;
}

path {
  fill: #8f8f8f;
}

.background-image {
  position: relative;
  z-index: 1;
  width: 85%;
  height: auto;
}

[data-test] {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: start;
  padding-left: 15px;
  padding-right: 15px;
}

[data-test] span.color {
  flex-shrink: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  width: 60px;
  padding-bottom: 9px;
}

[data-test] span.color span {
  height: 23px;
  width: 20px;
  background: var(--color);
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
  margin-bottom: -6px;
}

[data-test] span.color span:first-child {
  margin-left: 1px;
}

.highlight {
  stroke-width: 10px;
  stroke: #000;
}

img {
  visibility: hidden;
}

button {
  font-size: 1.25em;
  padding: 1em;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.js" integrity="sha512-n/4gHW3atM3QqRcbCn6ewmpxcLAHGaDjpEBu4xZd47N0W2oQ+6q7oc3PXstrJYXcbNU1OHdQ1T7pAP+gi5Yu8g==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.2.2/html2canvas.js" integrity="sha512-Alb3nvf6wRVUhs6H8foMA8fuWAKFFretiYkk2WbrMSbAtTtNBOjKLbDIagmFVypIi4wT1pRhHwz+R/W7nU31wg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

<div class="grid-container">
  <header class="header">
  
    <img class="logo" src="logo.png" alt="">

    <nav class="navbar">
      <a href=about.html class="nav-link">About</a>
      <a href=howto.html class="nav-link">How to</a>
      <a href=faqs.html class="nav-link">FAQs</a>
      <a href=contact.html class="nav-link">Contact</a>
    </nav>

  </header>
  
  
  
</div>
</div>



  <main class="main">

    <div class="wrap">
      <div id="arrow-left" class="arrow"><span>&#10094;</span></div>
      <div id="arrow-right" class="arrow"><span>&#10095;</span></div>
      <div id="slider">

        <div class="slide slide1">
          <div class="slide-content">
            <div id="container">
              <div class="download-container">
                <svg id="product-svg" viewBox="0 0 256 256">
                  <path id="box1" class="product" d="M24 130.25L24 235L233 235L233 25.5L24 25.5L24 130.25Z" />
                </svg>

                <img class="background-image" src="https://images.vexels.com/media/users/3/139342/isolated/lists/61cddf9cfe50f4baaa8f472c253d1cb4-basic-square-outline.png" alt="">
              </div>
            </div>

            <div class="text">image1</div>
          </div>
        </div>

        <div class="slide slide1">
          <div class="slide-content"
            <div id="container">
              <div class="download-container">
                <svg id="product-svg" viewBox="0 0 256 256">
                  <path id="box2" class="product" d="M24 130.25L24 235L233 235L233 25.5L24 25.5L24 130.25Z" />
                </svg>

                <img class="background-image" src="https://images.vexels.com/media/users/3/139342/isolated/lists/61cddf9cfe50f4baaa8f472c253d1cb4-basic-square-outline.png" alt="">
              </div>
            </div>

            <div class="text">image2</div>
          </div>
        </div>

        <button class="download-btn">Download element!</button>
        <img src="" id="created-element" />

  </main>

  <section class="color-select">
    <div data-test>
      <span class="color red">
        <span class="color-selected" style="--color: #ff6666 " data-hex="#ff6666"></span>
      </span>
    </div>
  </section>

</div>

Answer 1

如果要下载已更改背景的图像，则首先需要使用 HTML2Canvas 之类的库将 HTML(图像和背景一起)转换为图像。

图书馆:https://github.com/niklasvh/html2canvas

教程:https://codepedia.info/convert-html-to-image-in-jquery-div-or-table-to-jpg-png

这将截取在您拥有的页面上更改的 HTML 的屏幕截图，然后下载图像。