Спикер — Зотов Максим — Senior PHP разработчик BWT Team
Тема «HTML 5 canvas и электронный документооборот»
В докладе вы узнаете подробнее о том:
1. Что такое HTML 5 canvas и как работать с его API
2. Как отображать pdf документы в браузерах и что такое pdf формы
3. Познакомитесь с библиотекой PDF.js
4. Поделимся нашим опытом перевода клиентов, привыкших заполнять документы в бумажной форме, на электронный документооборот
Урок 3Ds Max - полустационар "Компьютерная графика и дизайн" в КА "ШАГ"
Html5 canvas и электронный документооборот
1. HTML 5 canvas лект о
доку е тоо о от
Зотов М к м.
Senior PрP отч к BWT Team.
2. ТЗ.
• Дел т п доку е те от ук лект о о де е.
• З пол т д е доку е те кл ту то д е
о о ло о т у д .
• П т у ко у е, пото п одол т пол е е
лект о о де е.
3. Что пол ов л .
• PDF PDн form
• PDF.JS
• HTML5 canvas.
• Anoto Formidable Digital Pens.
4. PDF PDн from.
• Portable Document Format (PDF) — е пл т о е о т
лект о доку е то , от о Adobe
Systems пол о е д о о о те к PostScript.
• Фо т PDн по ол ет ед т ео од е т
по т о тек т , екто е т о е о е , о
ул т ед - т к
5.
6. PDF.JS
• PDн.js л pdf.js — о од ое п о ое о е пе е е
рTMэ5 JavaScript дл п ео о ло о те PDн
код рTMэ5, п од дл п о от е - у е е.
• https://github.com/mozilla/pdf.js
• https://mozilla.github.io/pdf.js/web/viewer.html
7. PDF.JS. Hello World
• var url = 'https://mozilla.github.io/pdf.js/web/compressed.tracemonkey-pldi-09.pdf';
PDFJS.workerSrc = 'pdf.worker.js';
PDFJS.getDocument(url).then(function getPdfHelloWorld(pdf) {
pdf.getPage(1).then(function getPageHelloWorld(page) {
var scale = 1.5;
var viewport = page.getViewport(scale);
var canvas = document.getElementById('the-canvas');
var context = canvas.getContext('2d');
canvas.height = viewport.height;
canvas.width = viewport.width;
var renderContext = {
canvasContext: context,
viewport: viewport
};
page.render(renderContext);
});
});
9. К к е фо ?
• Ну о отдел о п т pdf. Со д т т
д html о у кл д т ее по е canvas.
10. К к е фо ?
• {
"page_number":1,
"field_name":"test_9",
"field_values":[],
"field_type": "text",
"field_is_multiline":0,
"field_position":[
{
"height":11.006989,
"page":1,
"width":79.79999,
"left":499.56,
"units":"px",
"top":324.72
}
],
"field_style":{
"color":"",
"font":"Helvetica",
"size":"8"
}
11. Т п поле фо .
• Checkbox
• Text
• Radiobutton
• combobox
12. HTML5 CANVAS
• Canvas ( л. canvas — « ол т», у . канва́с) — ле е т HTML5,
п ед е дл о д т о о о д у е о о
о е п по о к пто , о о ке JavaScript.
• Н ло от ёт лок од т ле е у. По у ол е о
т е т п к ел , от т п т де т