Signature Tool

no

Transcript

1. Signature Tool Improvement Howelin & Laserji 20120919
2. Implementation HTML5 Canvas PHP GD (SUSE) SUPPORTED ? Canvas : PHP
3. Piece of code Canvas Basics Load Image Text Metrics @font-face (Drag &) Drop Compositing
4. Canvas Basics <canvas>Sorry!</canvas> try{ document.createElement(‘canvas’).getContext( ‘2d’); }catch(e){ } var canvas = document.getElementById(‘canvas’); var context = canvas.getContext(‘2d’); context.fillText(‘Hello’,200,60);
5. Load Image var img_pop = new Image(); img_pop.src = ‘img/pop.png’; img_pop.onload = function(){ // do sth. }
6. Text Metrics context.measureText(text).width; The measureText() method returns an object that contains the width of the specified text, in pixels.
7. @font-face @font-face { font-family: 'GothamRoundedBook'; src: url("GothamRnd-Book.otf"); } .canvas{font-family: ‘GothamRoundedBook’;} /*must be used somewhere*/
8. @font-face @font-face { font-family: MyHelvetica; src: local("Helvetica Neue Bold"), local("HelveticaNeue-Bold"), url(MgOpenModernaBold.ttf); font-weight: bold; }
9. @font-face IE:Embedded OpenType(.eot) Firefox:TrueType,OpenType(.ttf, .otf) & WOFF Chrome:TrueType,OpenType(.ttf, .otf) & SVG Font(.svg) Safari:TrueType,OpenType(.ttf, .otf) & SVG Font(.svg) Opera:TrueType,OpenType(.ttf, .otf) & SVG Font(.svg)
10. @font-face WHY NOT? COPYRIGHT & FOUT(Flash of unstyled Text) http://www.google.com/webfonts (FREE) http://www.fontsquirrel.com/fontface/genera tor (HAS A BLACKLIST)
11. (Drag &) Drop <span id="custom" ondragenter="return false" ondragover="return false"> Drop Yours</span> $('#custom')[0].ondrop = function(e){ // do sth. };
12. (Drag &) Drop DataTransfer e.dataTransfer.files // FileList same as <input id=“fileItem” type=“file”> var file = document.getElementById('fileItem').files[0 ];
13. • Compositing globalCompositeOperation = type
14. Compositing Image must loaded first Image z-Index
15. Welcome Howe !!!