[JS гайд] Как преобразовать div-блок в png картинку. - Форум Cheat-Master.ru
  • Страница 1 из 1
  • 1
Модератор форума: Alowir, Sanoxxx  
Форум » Программирование » JAVA Программирование » [JS гайд] Как преобразовать div-блок в png картинку.
[JS гайд] Как преобразовать div-блок в png картинку.
Newell123456 Дата: Пятница, 24.05.2019, 18:27 | Сообщение # 1
Любитель
Сообщений: 37
Статус: Offline
Всем привет!
Я вам покажу как преобразовать блок в png картинку.

Для начала нужно подключить в тэг <head> две библиотеки: html2canvas и FileSaver.
Код
<script type="text/javascript" src="html2canvas.js"></script>
<script type="text/javascript" src="FileSaver.js"></script>


html2canvas - https://yadi.sk/d/2u6F8K46YJJCdg
FileSaver - https://yadi.sk/d/wVWPj9ohHrf6jw

Полный исходиник:

Код
<!DOCTYPE html>
<html>
<head>
    <title>title</title>

    <style type="text/css">
  #result {
   width: 200px;
   height: 100px;
  }
  #content {
   width: 200px;
   height: 100px;
  }
    </style>

    <script type="text/javascript" src="html2canvas.js"></script>
    <script type="text/javascript" src="FileSaver.js"></script>
</head>
<body>

    <div id="content">
  <h1>MyTitle</h1>
  <p>MyP</p>
    </div>

    <button onclick="GoScreen()">Sceen!</button>

    <div id="result"></div>

    <div id="createPNGButton">
     <button onclick="downloadImage()">Save as Image</button>        
    </div>

    <script>

  function GoScreen() {
   
   html2canvas(document.getElementById("content")).then(function(canvas) {

    var my_screen = canvas;

    document.getElementById("result").appendChild(my_screen);
    my_screen.setAttribute("id", "thecanvas");

   });    
  
  }

  function downloadImage()
        {
            var canvas = document.getElementById("thecanvas");
   // draw to canvas...
   canvas.toBlob(function(blob) {
       saveAs(blob, "raxel_ava.png");
   });
        }  

    </script>

</body>
</html>


p.s Если хотите сделаю разбор кода....
astel Дата: Пятница, 15.05.2020, 11:27 | Сообщение # 2
Новичок
Сообщений: 1
Статус: Offline
Интересное решение.
1. Как сделать сохранение в один клик?
2. Как захватить div с содержимым и без жесткого ограничения его размера?
Форум » Программирование » JAVA Программирование » [JS гайд] Как преобразовать div-блок в png картинку.
  • Страница 1 из 1
  • 1
Поиск:
Статистика Форума
Лучшие пользователи
Admin [39113]

GеNius [7209]

[CM]Russel [5557]

kenlo763 [4952]

[CM]AGRESSOR [4639]

Snake_Firm [4452]

Сэс [4416]

Artem_Buero [4223]

[CM]Durman [3204]

[CM]Рафаэль [3080]

iMaddy [2855]

sky_Woker [2854]

getrekt [2745]

Новые пользователи
Stanislav_ss [16:05]

123131312312314534 [13:41]

Pan40xxl [12:36]

chinazes000 [11:29]

donaldga2 [05:28]

rubenia18 [21:17]

pokotiloroman91 [18:24]

stephensh5 [12:00]

calliesv7 [06:11]

louqm16 [22:14]

artushak [16:32]

Kingpolker [15:42]

leeyv11 [15:12]