Как загрузить настраиваемое поле для изменения цвета в виде изображения с фоновым изображением? ⇐ Jquery

[Anonymous]

У меня есть поле, которое может изменить цвет, когда вы выбираете поле, а затем выбираете цвет. Я использовал 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);
});
});
});< /code>
.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;
}< /code>






[img]logo.png[/img]


[url=about.html class=]About[/url]
[url=howto.html class=]How to[/url]
[url=faqs.html class=]FAQs[/url]
[url=contact.html class=]Contact[/url]








❮
❯









[img]https://images.vexels.com/media/users/3/139342/isolated/lists/61cddf9cfe50f4baaa8f472c253d1cb4-basic-square-outline.png[/img]



image1





Подробнее здесь: [url]https://stackoverflow.com/questions/68770587/how-to-download-customisable-color-change-box-as-image-with-the-background-image[/url]