Здравствуйте. Скажите, как сделать кнопки переключения заготовок?
Цель такая, чтобы при нажатии на одну из кнопок формировалась заготовка:
картинка + текст + цвет текста + размер шрифта + стиль шрифта
Если нужно можно еще сюда зайти (там с css)
https://codepen.io/nikeyb/pen/zyrbgy
Вот код.
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
<html>
<body>
<div class="quote">
<div class="image">
<img src="https://mirpozitiva.ru/uploads/posts/2017-04/medium/1492620921_06.jpg" alt="" >
</div>
<div class="overlay"></div>
<div class="content">
<div class="text">
<p>Love all, trust a few, do wrong to none.</p>
<small>⚊ William Shakespeare</small>
</div>
</div>
</div>
<div class="generator">
<div class="generator-inner">
<h3>Generator</h3>
<div class="form-group">
<label for="quote">Quote</label>
<textarea type="text" class="form-control" name="quote" required>Love all, trust a few, do wrong to none.</textarea>
</div>
<div class="form-group">
<label for="author">Author</label>
<input type="text" class="form-control" name="author" value="William Shakespeare" required>
</div>
<div class="form-group">
<label for="image">Image</label>
<input type="file" class="form-control" name="image" accept="image/x-png,image/gif,image/jpeg">
</div>
<div class="form-group">
<a href="javascript:getCapture();" class="btn btn-block btn-secondary">DOWNLOAD</a>
<a href="javascript:" id="download" style="display: none"></a>
</div>
</div>
</div>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery-compat/3.0.0-alpha1/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.2/css/bootstrap.min.css'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.4/popper.min.js'></script>
<script src='https://html2canvas.hertzen.com/dist/html2canvas.min.js'></script>
</body>
</html>
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
function getCapture(){
html2canvas(document.querySelector(".quote")).then(canvas => {
var quote = document.querySelector(".quote");
document.body.appendChild(canvas);
var download = document.getElementById("download");
var image = canvas.toDataURL("image/png").replace("image/png", "image/octet-stream");
download.setAttribute("href", image);
download.setAttribute("download","quote.png");
download.click();
});
}
$(function(){
$('.generator [name="author"]').keyup(function(){
var author = $(this).val();
$('.quote .text small').html('⚊ ' + author);
});
$('.generator [name="quote"]').keyup(function(){
var quote = $(this).val();
$('.quote .text p').html(quote);
});
$('.generator [name="image"]').on('change', function(){
var input = this;
var url = $(this).val();
var ext = url.substring(url.lastIndexOf('.') + 1).toLowerCase();
if (input.files && input.files[0]&& (ext == "gif" || ext == "png" || ext == "jpeg" || ext == "jpg"))
{
var reader = new FileReader();
reader.onload = function (e) {
$('.quote img').attr('src', e.target.result);
}
reader.readAsDataURL(input.files[0]);
}else{
$('.quote img').attr('src', '');
}
});
});
