Mam stworzony trójkolorowy gradient w CSS i chcę z niego tworzyć obraz JPG np. 1000px na 1000px. Jak to najszybciej zrobić w PHP?
Gradent z CSS do JPG
- Rejestracja: dni
- Ostatnio: dni
- Postów: 8488
2
Co próbujesz zrobić?
xpeye napisał(a):
Mam stworzony trójkolorowy gradient w CSS i chcę z niego tworzyć obraz JPG np. 1000px na 1000px. Jak to najszybciej zrobić w PHP?
Gdzie masz ten gradient? Chcesz to raz skonwertować czy wiele razy?
To można różnie rozumieć. Ogólnie możesz użyć Puppeteer. To taka przeglądarka, której nie widać i która może robić screenshoty. I steruje się tą przeglądarką za pomocą JavaScriptu (a nie PHP).
https://pptr.dev/guides/screenshots/
Tylko to może to być "armata na muchę" w zależności od tego, co próbujesz osiągnąć. Może chodzi ci bardziej o jakąś libkę 100% PHP, która będzie w stanie sparsować deklarację gradientu CSS i przekonwertować to do obrazka? To tu nie pomogę.
- Rejestracja: dni
- Ostatnio: dni
- Postów: 153
0
Mam gradient
radial-gradient(circle, #fe6701, #ff8600, #ffa300, #ffbf00, #ffda00, #eee000, #dde600, #c9ec0d, #a2dd1a, #7ccc25, #54bb2d, #22aa33);
i chcę mieć jpg 5000px na 5000px
- Rejestracja: dni
- Ostatnio: dni
- Postów: 70
1
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>
<title>Convert DIV to JPG</title>
</head>
<body>
<div id="myDiv" style="width: 5000px; height: 5000px; background: radial-gradient(circle, #fe6701, #ff8600, #ffa300, #ffbf00, #ffda00, #eee000, #dde600, #c9ec0d, #a2dd1a, #7ccc25, #54bb2d, #22aa33)">
</div>
<button onclick="convertToImage()">Convert to JPG</button>
<script>
function convertToImage() {
const element = document.getElementById('myDiv');
html2canvas(element).then((canvas) => {
const link = document.createElement('a');
link.download = 'myDiv.jpg';
link.href = canvas.toDataURL('image/jpeg');
link.click();
});
}
</script>
</body>
</html>
- Rejestracja: dni
- Ostatnio: dni
- Postów: 8488
0
xpeye napisał(a):
Mam gradient
radial-gradient(circle, #fe6701, #ff8600, #ffa300, #ffbf00, #ffda00, #eee000, #dde600, #c9ec0d, #a2dd1a, #7ccc25, #54bb2d, #22aa33);
i chcę mieć jpg 5000px na 5000px
Ale w jakim dokładnie przypadku, kontekście? Czy będzie to zawsze ten sam gradient, czy będzie się zmieniał? Czy użytkownik będzie mógł zmieniać gradient?
Jak wygląda całość aplikacji?
Bo zrobienie raz screenshota jest proste (można to nawet ręcznie zrobić). Ale jeśli ma to być część działającej aplikacji, to już trochę co innego się robi.