Шаблон картинок на JS / HTML, JavaScript, VBScript, CSS

ReSQL.ru

2.0.59

Планшетная версия Контакт Правила FAQ Помощь

Гость

Войти | Профиль | Очистить

Нов. | Гор. | Избр.

Написать

Автор*:

Ввести пароль для входа

Тема*:

Сообщение

Данное сообщение тематическое

Сообщение содержит картинки или видео 18+

Автор:

ВНИМАНИЕ! На данном подфоруме действуют строгие правила. Удостоверьтесь, что ваше сообщение соответствует им!

Форум или тема закрыты для гостей. Необходима авторизация!

Загрузить последнюю сохраненную версию

Вставить как галерею

Максимальный размер вложений: 4,0 МБ, аудио/видео: 8,0 МБ. Картинки большего размера ужимаются, если возможно.

Введите код, изображенный на картинке. Если код нечитаемый, кликните картинку, чтобы загрузить другой вариант.

Отправляя сообщение, я выражаю свое согласие с правилами форума и принимаю пользовательское соглашение.

Действия ...

Доб. в избранное
Игнор. тему
Прикреп. тему
Пометить прочит. / непрочит.
Фильтр:
Сообщения автора темы
Сообщение содержит вложения
Сообщение содержит картинки
Сообщение содержит видеоклипы
Сообщение содержит аудиоклипы
Сообщение содержит картинки или видео 18+

Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Шаблон картинок на JS / 1 сообщений из 1, страница 1 из 1

15.12.2018, 02:05

#39748296

Nikeybi

Гость

Шаблон картинок на JS

Здравствуйте. Скажите, как сделать кнопки переключения заготовок?
Цель такая, чтобы при нажатии на одну из кнопок формировалась заготовка:
картинка + текст + цвет текста + размер шрифта + стиль шрифта
Если нужно можно еще сюда зайти (там с css) https://codepen.io/nikeyb/pen/zyrbgy
Вот код.

Код: 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.

<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>&#9866; 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>

Код: java

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('&#9866; ' + 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', '');
    }
    
  });
  
});

...

Рейтинг:

0 / 0

| Ответить | Цитировать | Написать

Читали тему (0):

Читали форум (0):

Пользователи онлайн (0):

start [/forum/topic.php?fid=22&mobile=1&tid=1443933]:	0ms
get settings:	8ms
get forum list:	13ms
check forum access:	4ms
check topic access:	4ms
track hit:	159ms
get topic data:	11ms
get forum data:	2ms
get page messages:	28ms
get tp. blocked users:	2ms
others:	14ms

total:	245ms