Есть электронная подпись на Js/Jq как сохранить её на сервере

@ЕвгенийВащенко · Регистрация: 22.04.2017

Студворк — интернет-сервис помощи студентам

Всем привет! Есть форма, типа: http://www.pchelomer.ru/forma/... /index.php Блок под надписью Please sign below with your mouse or using touch-screen display. * служит холстом для ввода подписи клиента, при помощи мышки/пер/пальца на сенсорных экранах. Есть задача: Сохранить подпись в формате png, на хостинге/в папке для последующей вставки в pdf файле. Как вставить в pdf разобрался, зато с вытаскиванием подписи из формы в виде картинки, беда/не хватает знаний. Кто в деле!? Тому бонус) Отвечу на любые, возникшие у Вас, вопросы по задаче.

@Mr_Sergo · 19.07.2018, 18:11

ЕвгенийВащенко,
У canvas id имеется? Или класс?
Вот например у этого имеется:

HTML5
1
<canvas id="canvas" width="150" height="150"></canvas>

@ЕвгенийВащенко · 19.07.2018, 18:19 **[ТС]**

Сообщение от zlojnaxa

ЕвгенийВащенко,
У canvas id имеется? Или класс?
Вот например у этого имеется:

HTML5
1
<canvas id="canvas" width="150" height="150"></canvas>

zlojnaxa, у canvas id нет, тег canvas вижу только в браузере в инспекторе F12 в коде его нет. Не могу понять как он вообще образовывается, если на готовой подписи щёлкнуть ПКМ, то можно сохранить её в canvas.png Ребята, как Вы во всем это разобрались, столько знать надо)

@Mr_Sergo · 19.07.2018, 18:27

ЕвгенийВащенко,
Сразу скажу я в canvas не силен, но вот посидел пол часа посмотрел как это делают и накидал пример:

HTML5
1
2
<canvas id="canvas" width="150" height="150"></canvas>
<button id="saveAs">Сохранить как пнг</button>

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
draw();
function draw() {
    var canvas = document.getElementById('canvas');
    if (canvas.getContext) {
        var ctx = canvas.getContext('2d');
        ctx.fillRect(25,25,100,100);
        ctx.clearRect(45,45,60,60);
        ctx.strokeRect(50,50,50,50);
    }
    document.getElementById('saveAs').addEventListener('click',function(){
        var dataURL = canvas.toDataURL();
        var imageData = document.getElementById('canvas').src = dataURL;
        var image = new Image();
        image.src = imageData;
        var link = document.createElement("a");
        link.setAttribute("href", image.src);
        link.setAttribute("download", "canvasImage");
        link.click();
    },false);
}

Посмотреть можно тут

Возможно в коде есть косяки!

Добавлено через 6 минут

Сообщение от ЕвгенийВащенко

тег canvas вижу только в браузере в инспекторе F12 в коде его нет

Скажите canvas на странице только в одном экземпляре?

@ЕвгенийВащенко · 19.07.2018, 18:27 **[ТС]**

[QUOTE=zlojnaxa;12550310]ЕвгенийВащенко,
Сразу скажу я в canvas не силен, но вот посидел пол часа посмотрел как это делают и накидал пример:
id я не смогу поставит к canvas, потому что в коде его найти не могу. Попробую создать на новом примере, благодарю за помощь!

@Mr_Sergo · 19.07.2018, 18:28

ЕвгенийВащенко, Скажите canvas на странице только в одном экземпляре?

@ЕвгенийВащенко · 19.07.2018, 18:30 **[ТС]**

Сообщение от zlojnaxa

ЕвгенийВащенко, Скажите canvas на странице только в одном экземпляре?

Да, он один, слава Программистам. Я понял, к чему Вы клоните, можно использовать не айдишник а тег для привязки скриптов? Правильно понял?

@Mr_Sergo · 19.07.2018, 18:56

Сообщение от ЕвгенийВащенко

можно использовать не айдишник а тег для привязки скриптов? Правильно понял?

Правильно. Но это я уже подправил:

HTML5
1
2
<canvas width="150" height="150"></canvas>
<button id="saveAs">Сохранить как пнг</button>

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
draw();
function draw() {
    var canvas = document.getElementsByTagName('canvas')[0];
    if (canvas.getContext) {
        var ctx = canvas.getContext('2d');
        ctx.fillRect(25,25,100,100);
        ctx.clearRect(45,45,60,60);
        ctx.strokeRect(50,50,50,50);
    }
    document.getElementById('saveAs').addEventListener('click',function(){
        var dataURL = canvas.toDataURL();
        var imageData = canvas.src = dataURL;
        var image = new Image();
        image.src = imageData;
        var link = document.createElement("a");
        link.setAttribute("href", image.src);
        link.setAttribute("download", "canvasImage");
        link.click();
    },false);
}

Добавлено через 2 минуты
ЕвгенийВащенко,
В коде формируется изображение, теперь его нужно вам как-то сохранить в определенной папке и ссылку на изображение в БД, потом нужно подставлять ссылку из БД для последующей вставки в pdf файле.

Добавлено через 21 минуту
ЕвгенийВащенко,
Вообщем вот функция:

JavaScript
1
2
3
4
5
6
7
8
9
function draw() {
    var canvas = document.getElementsByTagName('canvas')[0];
    var dataURL = canvas.toDataURL();
    var imageData = canvas.src = dataURL;
    var image = new Image();
 
    // переменная canvasPNG это готовая картинка в виде строки которую можно записать в БД или еще куда-то
    var canvasPNG = image.src = imageData;
}

Которая должна выполнять именно то что вам нужно. Переменную canvasPNG можете брать и работать с ней дальше (вставлять в pdf файл)- это уже картинка.
Если что не получится- пишите.

@ЕвгенийВащенко · 19.07.2018, 19:00 **[ТС]**

Сообщение от zlojnaxa

Если что не получится- пишите.

Завтра со свежей головой буду пробовать

@Mr_Sergo · 19.07.2018, 20:06

ЕвгенийВащенко,
Перейдите по этой ссылке
> откройте "инспектор --- F12"
> перейдите во вкладку консоль
> найдите строку которая начинается с data:image/png;
> кликните на нее правой кнопкой мыши и выберите "Open in new tab" или "Открыть в новой вкладке" что-то вроде этого
> у вас откроется готовое изображение преобразованное из строки в картинку ПНГ --- вот эту самую строку и можно вставлять в БД или еще куда и потом в PDF- файл или просто в PDF- файл.

Кликните здесь для просмотра всего текста

JavaScript
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
// на этот код не обращайте внимания- он нужен исключительно для примера, вам он не понадобится
    draw();
    function draw() {
        var canvas = document.getElementsByTagName('canvas')[0];
        if (canvas.getContext) {
            var ctx = canvas.getContext('2d');
            ctx.fillRect(25,25,100,100);
            ctx.clearRect(45,45,60,60);
            ctx.strokeRect(50,50,50,50);
        }
    }
// на этот код не обращайте внимания- он нужен исключительно для примера, вам он не понадобится
 
 
 
// а вот этот код как раз то что вам нужно. Функция saveAsPNG() возвращает готовое изображение в виде строки
    
    console.log(saveAsPNG());   // для примера ее можно использовать таким образом, в консоли вы увидите длиную строку символов- это и есть картинка ПНГ
    
    function saveAsPNG(){
        var canvas = document.getElementsByTagName('canvas')[0];
        var dataURL = canvas.toDataURL();
        var imageData = canvas.src = dataURL;
        var image = new Image();
        image.src = imageData;
        var canvasPNG = image.src = imageData;
        return canvasPNG;
    }
// а вот этот код как раз то что вам нужно. Функция saveAsPNG() возвращает готовое изображение в виде строки

@Mr_Sergo · 21.07.2018, 18:12

ЕвгенийВащенко,
Нуу... дык разобрались?
Там, по сути, всего пару строчек кода.
То что я скинул выше это гмно. Если нужно я скину переделанный код

Новые блоги и статьи Все статьи Все блоги /
Музыка, написанная Искусственным Интеллектом volvo 04.12.2025 Всем привет. Некоторое время назад меня заинтересовало, что уже умеет ИИ в плане написания музыки для песен, и, собственно, исполнения этих самых песен. Стихов у нас много, уже вышли 4 книги, еще 3. . .	От async/await к виртуальным потокам в Python IndentationError 23.11.2025 Армин Ронахер поставил под сомнение async/ await. Создатель Flask заявляет: цветные функции - провал, виртуальные потоки - решение. Не threading-динозавры, а новое поколение лёгких потоков. Откат?. . .	Поиск "дружественных имён" СОМ портов Argus19 22.11.2025 Поиск "дружественных имён" СОМ портов На странице: https:/ / norseev. ru/ 2018/ 01/ 04/ comportlist_windows/ нашёл схожую тему. Там приведён код на С++, который показывает только имена СОМ портов, типа,. . .	Сколько Государство потратило денег на меня, обеспечивая инсулином. Programma_Boinc 20.11.2025 Сколько Государство потратило денег на меня, обеспечивая инсулином. Вот решила сделать интересный приблизительный подсчет, сколько государство потратило на меня денег на покупку инсулинов. . . .	Ломающие изменения в C#.NStar Alpha Etyuhibosecyu 20.11.2025 Уже можно не только тестировать, но и пользоваться C#. NStar - писать оконные приложения, содержащие надписи, кнопки, текстовые поля и даже изображения, например, моя игра "Три в ряд" написана на этом. . .
Мысли в слух kumehtar 18.11.2025 Кстати, совсем недавно имел разговор на тему медитаций с людьми. И обнаружил, что они вообще не понимают что такое медитация и зачем она нужна. Самые базовые вещи. Для них это - когда просто люди. . .	Создание Single Page Application на фреймах krapotkin 16.11.2025 Статья исключительно для начинающих. Подходы оригинальностью не блещут. В век Веб все очень привыкли к дизайну Single-Page-Application . Быстренько разберем подход "на фреймах". Мы делаем одну. . .	Фото: Daniel Greenwood kumehtar 13.11.2025	Расскажи мне о Мире, бродяга kumehtar 12.11.2025 — Расскажи мне о Мире, бродяга, Ты же видел моря и метели. Как сменялись короны и стяги, Как эпохи стрелою летели. - Этот мир — это крылья и горы, Снег и пламя, любовь и тревоги, И бескрайние. . .	PowerShell Snippets iNNOKENTIY21 11.11.2025 Модуль PowerShell 5. 1+ : Snippets. psm1 У меня модуль расположен в пользовательской папке модулей, по умолчанию: \Documents\WindowsPowerShell\Modules\Snippets\ А в самом низу файла-профиля. . .

@ЕвгенийВащенко 1 / 1 / 0 Регистрация: 22.04.2017 Сообщений: 134

	Есть электронная подпись на Js/Jq как сохранить её на сервере 19.07.2018, 17:17. Показов 2482. Ответов 10 Метки jquery, php (Все метки) Всем привет! Есть форма, типа: http://www.pchelomer.ru/forma/... /index.php Блок под надписью Please sign below with your mouse or using touch-screen display. * служит холстом для ввода подписи клиента, при помощи мышки/пер/пальца на сенсорных экранах. Есть задача: Сохранить подпись в формате png, на хостинге/в папке для последующей вставки в pdf файле. Как вставить в pdf разобрался, зато с вытаскиванием подписи из формы в виде картинки, беда/не хватает знаний. Кто в деле!? Тому бонус) Отвечу на любые, возникшие у Вас, вопросы по задаче. 0

@ЕвгенийВащенко 1 / 1 / 0 Регистрация: 22.04.2017 Сообщений: 134
	19.07.2018, 18:27 [ТС]
	[QUOTE=zlojnaxa;12550310]ЕвгенийВащенко, Сразу скажу я в `canvas` не силен, но вот посидел пол часа посмотрел как это делают и накидал пример: id я не смогу поставит к canvas, потому что в коде его найти не могу. Попробую создать на новом примере, благодарю за помощь! 0

@Mr_Sergo 2037 / 1096 / 409 Регистрация: 29.04.2016 Сообщений: 2,625
	19.07.2018, 18:28
	ЕвгенийВащенко, Скажите canvas на странице только в одном экземпляре? 0

@Mr_Sergo 2037 / 1096 / 409 Регистрация: 29.04.2016 Сообщений: 2,625
	21.07.2018, 18:12
	ЕвгенийВащенко, Нуу... дык разобрались? Там, по сути, всего пару строчек кода. То что я скинул выше это гмно. Если нужно я скину переделанный код 0

Есть электронная подпись на Js/Jq как сохранить её на сервере

Решение