[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
Поиск:
Статистика Форума
Лучшие пользователи
АК_47 [36572]

GеNius [7210]

[CM]Russel [5557]

romka619 [5010]

[CM]AGRESSOR [4638]

Snake_Firm [4454]

Сэс [4416]

Artem_Buero [4224]

[CM]Durman [3208]

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

iMaddy [2855]

sky_Woker [2854]

-Masson- [2776]

Новые пользователи
bymean [07:00]

gusmanovsanek338 [06:35]

89960214068 [06:01]

Radmirvilov [05:33]

haker56010 [04:56]

dwdwadawdwqwdad [04:53]

Karen0012 [03:18]

a5284180 [02:53]

Michael1986 [02:53]

Kipta [01:05]

vlad0503991601156896 [00:48]

S1nkiller [23:31]

прапр [23:28]