<\/p>\n
Wie Sie mithilfe des Webbrowser-Steuerelements und HTML5 programmgesteuert Grafiken erzeugen können, beleuchtete bereits unser Beitrag „HTML5 als Grafikkomponente“. Dass sich mit diesem Gespann aber Bilder auch interaktiv anlegen lassen, zeigen wir in diesem zweiten Teil anhand einer kleinen Zeichenanwendung, die ohne externe Komponenten auskommt. <\/b><\/p>\nReferenz<\/h2>\n
Die Ausführungen dieses Beitrags setzen jene aus dem Artikel HTML5 als Grafikkomponente<\/b> fort. Dort sind die Grundlagen zum Einsatz des Webbrowser-Steuerelements<\/b> im Verein mit HTML5<\/b> beschrieben, auf die hier nicht noch einmal eingegangen wird.<\/p>\nMS Access als Malprogramm<\/h2>\n
Bilder und Grafiken scheinen, wie man den Beiträgen verschiedener Foren entnehmen kann, für Access-Entwickler ein immer wiederkehrendes Thema zu sein. Sicher ist die Anzeige von Bilddateien in Formularen und Berichten, sei es über das Laden aus dem System, über OLE-Objekte<\/b> oder Anlagefelder<\/b>, eine häufige Anforderung. Das reicht vom Logo im Berichtskopf über ein Konterfei im Mitarbeiterdatensatz bis hin zu technischen Zeichnungen. Gerade für letztere eignet sich HTML5<\/b> gut, weil Sie hier eben nicht nur statisch Grafiken aus Dateien laden können, sondern in diese per VBA zusätzliche Elemente einbauen können. Oder Sie erstellen die Grafiken komplett neu, wie die Diagramme im Beitrag HTML5 als Grafikkomponente <\/b>zeigen.<\/p>\n
Das Problem bei HTML5<\/b> ist allerdings, dass die erzeugten Grafiken gerenderte Bitmaps sind, auf deren Elemente Sie später keinen Einfluss mehr haben. Ein Undo ist schlecht realisierbar. Möglich ist aber die sequenzielle Bearbeitung der Grafik, die auch interaktiv geschehen kann. Eben davon macht unser Malprogramm Gebrauch.<\/p>\n
Doch wer erstellt unter Access überhaupt Gemälde Ein Beispiel wären technische Zeichnungen, die vervollständigt werden. Als Anbieter von Raumausstattungen etwa könnten Sie einen Raum gestalten lassen, indem Sie dessen leere Ansicht laden und in diese interaktiv mit der Maus Elemente hineinziehen und positionieren. <\/p>\n
Sie besitzen ein mobiles Gerät, wie etwa ein Windows-Tablet Dann können Sie mit diesem etwa jene Terminals von DHL oder DPD nachbilden und in den Grafikbereich eines Formulars Unterschriften eingeben lassen, um sie in Tabellen abzuspeichern.<\/p>\n
Günstig sind in diesem Fall jedenfalls Geräte mit einem Touch-Screen, seien es Tablets oder Laptops. Natürlich erweitert ein Grafiktablett Ihren PC ebenfalls entsprechend.<\/p>\n
Nach dem Start der Beispieldatenbank HTMLImage2.accdb<\/b> finden Sie das Formular frmHTML5Draw<\/b> zur Laufzeit vor, wie in Bild 1. Hier können Sie pro Datensatz ein Bild anzeigen lassen oder zeichnen. Ist ein Bild gespeichert, so wird es automatisch aus einer Tabelle geladen, während bei einem neuen Datensatz ein leeres Blatt auf Sie wartet. Wenden wir uns zunächst den Funktionen des Formulars und seiner Steuerelemente zu.<\/p>\n
![\"So](\"..\/fileadmin\/_temp_\/2018_01\/frmDraw.png\")
<\/p>\n
Bild 1: So präsentiert sich die Malanwendung im Formular frmHTML5Draw der Beispieldatenbank mit einer bereits geladenen Grafik<\/span><\/b><\/p>\n Die Grafikfläche im Detailbereich besteht aus einem Webbrowser-Steuerelement<\/b>, in dessen Eigenschaft URL<\/b> der String =“about:blank“<\/b> hinterlegt ist, damit es keinen Navigationsfehler ausgibt, sondern eine weiße Fläche. Der Zeichnung können Sie oben einen Namen geben, der sie eindeutig identifiziert. Zeichnung und Namen gelangen beide in eine Tabelle, an die das Formular gebunden ist. Das Speichern geschieht allerdings nicht automatisch mit Verlassen des Datensatzes, sondern nur mit Klick auf den Button Bild speichern<\/b>. Alternativ kann die Grafik auch in eine Datei exportiert werden, wobei Ihnen die Formate PNG<\/b> und JPG<\/b> zur Auswahl stehen, welche Sie mit den beiden Checkboxen einstellen. übrigens beeinflusst diese Auswahl auch die interne Speicherung des Bilds in der Tabelle. Das Label rechts oben gibt Auskunft über den dafür benötigten Speicherbedarf.<\/p>\n Mit der Maus zeichnen Sie nun in die Grafikfläche. Die Farbe des Stifts stellen Sie mit Klick auf das Rechteck Malfarbe<\/b> ein, die Füllung einer Figur mit dem Rechteck Füllfarbe<\/b> und einen etwaigen Schattenwurf der Linien mit der Schattenfarbe<\/b>. Der Klick auf diese Rechtecke ruft jeweils den Windows-Farbauswahldialog auf (Bild 2). In der Combobox Strichbreite<\/b> wählen Sie die gewünschte Dicke des Stifts aus und dessen Deckkraft in der Combobox Alpha<\/b>. Stellen Sie Schatten<\/b> auf einen Wert größer als 0<\/b> ein, so wird die gemalte Linie zusätzlich mit einem Drop Shadow<\/b> hinterlegt, einem Verlaufsschatten, dessen Radius dem gewählten Wert entspricht.<\/p>\n Bild 2: Farbauswahldialog von Windows zur Einstellung der Farben<\/span><\/b><\/p>\n Diese Einstellungen wirken sich jeweils auf den nächsten Zeichenvorgang aus. Malen Sie nun etwa einen Kringel, der nicht unbedingt geschlossen sein muss. Mit Klick auf die Schaltfläche Figur schließen<\/b> geschieht dies jedoch automatisch. Ein weiterer Klick auf den nun aktivierten Button Figur füllen<\/b> versieht die jetzt umrandete Fläche mit der Füllfarbe. Sowohl Linien, wie Schatten und Füllungen berücksichtigen dabei die in Alpha<\/b> eingestellte Transparenz. Sie können somit überlagernd malen!<\/p>\n Ein Klick auf den Toggle-Button<\/b> Malen<\/b> ändert dessen Beschriftung in Radieren<\/b>. Nun können Sie mit der Maus Teile der Zeichnung ausradieren, was technisch so gelöst ist, dass einfach mit weißer Farbe ohne Transparenz und mit einer Stiftbreite von etwa 10 Pixeln gemalt wird. Ein weiterer Klick auf den Button stellt den vorigen Malmodus wieder her.<\/p>\n Sie können auch ein externes Bild in die Grafik laden, indem Sie den Dateiauswahldialog über den Button Ext. Bild laden…<\/b> aufrufen. Die Position des eingefügten Bilds können Sie damit allerdings eben so wenig beeinflussen, wie dessen Skalierung. Das hätte einigen zusätzlichen Aufwand erfordert, den wir uns erspart haben. Wohl aber beeinflusst wieder der Wert von Alpha<\/b>, wie transparent das Bild eingefügt wird.<\/p>\n Dass die Qualität der Zeichnung etwas zu wünschen übrig lässt, können Sie der Abbildung entnehmen. Mit der Maus ist das Malen gar nicht so einfach. Zudem kommen die Linien etwas krakelig daher, was weniger an HTML5<\/b> liegt, das Antialiasing<\/b> durchaus unterstützt, sondern am eingesetzten Verfahren. Das wollten wir so einfach halten, wie möglich: Bei jeder Mausbewegung wird zwischen den beiden abgetasteten Punkten eine einzelne Linie mit der lineTo<\/b>-Anweisung des HTML5-Canvas<\/b> erzeugt. Deshalb sind Bögen nicht wirklich rund, sondern weisen an den Punkten Kantensprünge auf, die zu einer vermeintlichen Rasterung führen. Sollte das vermieden werden, so müssten mehrere Abtastpunkte in einer Bezier<\/b>-Linie (bezierCurveTo<\/b>) zusammengeführt werden, was den Aufwand deutlich erhöht hätte.<\/p>\n Damit die Zeichnungen nicht nur in Dateien abgespeichert werden können, gibt es die Tabelle tblBilderDraw<\/b>, deren Aufbau Bild 3 verdeutlicht. Neben dem Namen der Zeichnung in BildName<\/b> und dem Autowert ID<\/b> gibt es hier nur ein OLE-Feld BildOLE<\/b>, in das indessen keineswegs OLE-Objekte<\/b> hineinkommen, sondern reine Binärdaten, die exakt der Datei entsprechen, die Sie auch extern abspeichern würden.<\/p>\n Bild 3: Die Tabelle tblBilderDraw speichert nur die gemalten Grafiken und ihren Namen neben der ID<\/span><\/b><\/p>\n Im Formular ist lediglich der BildName<\/b> direkt an die entsprechende Textbox gebunden. Das Webbrowser-Steuerelement ist natürlich ungebunden, denn mit den Binärdaten kann es nichts anfangen. Das Laden und Schreiben der Browser-Daten müssen VBA-Routinen übernehmen.<\/p>\n Ein Teil des gerade einmal 250 Zeilen langen Formular-Codes läuft beim öffnen (Form_Load<\/b>) und im Ereignis Beim Anzeigen<\/b> (Form_Current<\/b>) ab. Form_Load<\/b> stellt lediglich den Formularzeitgeber auf 100 ms<\/b> ein:<\/p>\n Denn im Zeitgeberereignis steht die eigentliche Prozedur, die die initialen Vorgänge vornimmt. Auch Form_Current<\/b> macht nicht viel mehr:<\/p>\n Sie ruft ebenfalls das Timer<\/b>-Ereignis auf. Grund dafür ist ein Delay<\/b> des Browsers ctlWeb<\/b> beim Navigieren zu einer neuen URL<\/b>, was asynchron abläuft und das Formular zuweilen durcheinanderbringt. Zwar ist das Steuerelement im Entwurf auf about:blank<\/b> eingestellt, doch dies wirkt sich nur beim ersten Laden aus, nicht aber beim Ansteuern eines neuen Datensatzes. Hier muss das leere HTML<\/b>-Dokument ausdrücklich erneut angelegt werden. Interessant ist damit vor allem die Ereignisprozedur Form_Timer<\/b>. Ihre einzelnen Abschnitte folgen nun.<\/p>\n Der Zeitgeber wird hier gleich wieder mit Setzen auf 0<\/b> deaktiviert, so dass es zu keinen Wiederholungen kommt. Anschließend wartet eine Schleife ab, bis die Eigenschaft ReadyState<\/b> des Browsers mindestens den Wert 3 (readyStateInteractive<\/b>) angenommen hat. Das dann der Fall, wenn der Browser die aufgerufene Seite fertiggestellt hat. Erst dann haben Sie Zugriff auf dessen HTML-Dokument<\/b>. Das wird in der Folge der Formularvariablen oDoc<\/b> zugewiesen:<\/p>\n Zusätzlich stellt die Routine hier die Hintergrundfarbe des Dokument-Body<\/b> auf hellgrau ein. Im Kopf des Formularmoduls sind noch einige weitere globale Variablen deklariert, auf die in anderen Prozeduren Bezug genommen wird:<\/p>\n Das HTML-Dokument steht also in oDoc<\/b>. Der HTML5-Canvas<\/b> kommt in die Elementvariablen oCanvE<\/b>. Allerdings bauen wir das Canvas<\/b>-Element nicht direkt in den Body<\/b> des Dokuments ein, sondern in einen zusätzlichen DIV<\/b>-Bereich, der gegebenenfalls verschoben werden kann. Die Variable oDiv<\/b> nimmt einen Verweis auf diesen Bereich entgegen und ist außerdem mit dem Prädikat WithEvents<\/b> versehen, wodurch dieser Ereignisse auslösen kann.<\/p>\n So etwa auch Mausereignisse, die wir später – Sie können es sich schon denken – dann zum Zeichnen auswerten werden. Und schließlich speichert die Variable CTX<\/b> noch den Grafikkontext des Canvas<\/b>, auf den erst ja die Zeichenanweisungen ausgeführt werden. Sie kennen das alles bereits aus dem ersten Beitrag zu HTML5<\/b>.<\/p>\n Nun legt die Prozedur die HTML-Elemente<\/b> im Dokument an und nimmt einige Grundeinstellungen für den Style<\/b> des Canvas<\/b> vor (Listing 1). Erst wird das DIV<\/b>-Element erzeugt und dem Body<\/b> hinzugefügt (appendChild<\/b>). Dann generiert createElement<\/b> einen neuen Canvas und weist ihn der modulglobalen Variablen oCanvE<\/b> zu. Seine Id<\/b> lautet zeichnung<\/b> und seine Breite und Höhe werden fest auf die Abmessungen 600×400 <\/b>festgelegt. Diese Werte für die Zeichenfläche können Sie natürlich nach Belieben modifizieren.<\/p>\n <\/p>\n Listing 1: Die Timer-Prozedur initialisiert den HTML5-Canvas<\/span><\/b><\/p>\n Weiter geht es mit dem über getContext(2D“)<\/b> ermittelten Grafikkontext des Canvas<\/b>, den die Variable CTX<\/b> entgegennimmt. Im With<\/b>-Block auf sie werden nicht nur einige Style<\/b>-Eigenschaften festgelegt, wie Hintergrund (FillStyle<\/b>), Linienbreite (lineWidth<\/b>) oder Schattenradius (shadowBlur<\/b>), sondern auch gleich ein die Grafik umrahmendes Rechteck mit strokeRect<\/b> gezeichnet.<\/p>\n Die Werte der Eigenschaften kommen dabei teilweise aus den Steuerelementen des Formulars. So entspricht der Schattenradius dem Wert der Combobox cbShadow<\/b> oder die Malfarbe (strokeStyle<\/b>) der Hintergrundfarbe (BackColor<\/b>) des Rechtecksteuerelements rColor<\/b>.<\/p>\n Damit sind unsere HTML5-Objekte fertiggestellt und dem Zeichnen steht nichts mehr im Wege. Der Teil der Prozedur, der eine bereits gespeicherte Grafik lädt, ist im Listing übrigens ausgespart. Dazu dann später mehr.<\/p>\n Ob Sie es glauben oder nicht: Der Code zum Zeichnen umfasst nur 18 Zeilen, aufgeteilt auf drei Ereignisprozeduren! Die werten das Verhalten der linken Maustaste auf den DIV<\/b>-Bereich oDiv<\/b> aus (Listing 2). <\/p>\n Listing 2: Auswertung der Ereignisse des HTML-Bereichs oDiv<\/span><\/b><\/p>\n Im Unterschied zu den Mausereignissen, die Sie von Access kennen, liefern diese keinerlei Parameter zurück, wie etwa die x- und y-Koordinaten des Ereignisses. Hier muss auf einen Trick zurückgegriffen werden. Alle Ereignisse eines HTML-Elements werden nämlich eigentlich von dessen Fenster verarbeitet, nicht vom Element selbst. An dieses Fenster gelangen Sie, indem Sie die Methode parentWindow<\/b> des Dokuments abfragen. Sie erhalten ein Objekt vom Type IHTMLWindow<\/b>. Das wiederum kennt eine Eigenschaft event<\/b>, die sein Ereignisobjekt liefert und hier von der Modulvariablen oEvent<\/b> entgegengenommen wird:<\/p>\n Dieses Event-Objekt<\/b> speichert im Browser global immer das zuletzt eingetretene Ereignis. Drücken Sie die linke Maustaste, so ereignet sich onmousedown<\/b> und das Event-Objekt<\/b> ist jetzt mit den entsprechenden Ereignisparametern bestückt. Die Koordinaten stehen etwa in seinen Eigenschaften OffsetX<\/b> und OffsetY<\/b> (Pixel), die Nummer der gedrückten Taste in der Eigenschaft Button<\/b>. Die rechte Maustaste hätte die Nummer zwei und wird in den Prozeduren über die Bedingung ignoriert.<\/p>\n Beim Drücken der linken Maustaste wird zunächst eine neue Figur über die Methode beginPath<\/b> im Grafikkontext CTX<\/b> angelegt. Die moveTo<\/b>-Methode bewegt den Stift zu den aus dem Event-Objekt<\/b> ausgelesenen Koordinaten. Bewegen Sie die Maus dann, so tritt onmousemove<\/b> ein und die Anweisung lineTo<\/b> zeichnet eine Line zu den neuen Koordinaten. Die wird allerdings erst sichtbar, wenn Sie stroke<\/b> aufrufen.<\/p>\n Lassen Sie die Maustaste los, so ereignet sich onmouseup<\/b>. Das brauchen Sie eigentlich nicht mehr, denn die Linie ist ja bereits gezeichnet. Hier wird aber zusätzlich gesteuert, dass die Schaltfläche zum Füllen der Figur im Formular (cmdFill<\/b>) deaktiviert wird. Denn die darf erst in Aktion treten, wenn die Figur geschlossen ist, worauf wir gleich zurückkommen.<\/p>\n Wie die Linie gezeichnet wird, bestimmen nur die Einstellungen für den zuvor festgelegten Style des Grafikkontexts CTX. In den Zeichenereignissen selbst muss hier nichts weiter getan werden. Die Stiftbreite etwa regelt die Combobox cbLineWidth<\/b>. ändern Sie ihren Eintrag, so kommt es zu dieser Prozedur Nach Aktualisieren<\/b>:<\/p>\n Ihr Wert wird also unmittelbar an die Style<\/b>-Eigenschaft lineWidth<\/b> des Grafikkontexts weitergeleitet, wobei allerdings eine Umwandlung in einen Single<\/b>-Datentyp per CSng<\/b> benötigt wird. Auf die erwarteten Parametertypen sollten Sie bei allen HTML5<\/b>-Objekten achten, weil nicht immer automatische Typkonvertierungen geschehen.<\/p>\n Nachdem Sie einen Linienzug zeichneten ist er noch nicht abgeschlossen. Denn beim Mausdrücken wurde die Anweisung beginPath<\/b> abgesetzt, die dem Grafikkontext sagt, dass folgend eine aus mehreren Schritten bestehende Operation vonstattengehen wird. Ein Klick auf den Button Figur schließen<\/b> ändert den Zustand:<\/p>\n Die Methode closePath<\/b> zeichnet automatisch eine Linie von der letzten Koordinate (von lineTo<\/b>) zu der, die bei beginPath<\/b> aktiv war. Sichtbar wird sie wieder erst per stroke<\/b>. Die Schaltfläche zum Füllen der Figur (cmdFill<\/b>) kann nun aktiviert werden. Deren Click<\/b>-Prozedur besteht auch nur aus zwei Zeilen:<\/p>\n Fill<\/b> füllt den letzten automatisch im Kontext gespeicherten Linienpfad mit der unter FillStyle<\/b> angegebenen Farbe und mit der Transparenz aus globalAlpha<\/b>. Damit eventuell nicht noch mehr gemalte Figuren in die Operation einbezogen werden, schließen Sie diesen gespeicherten Pfad ab, indem Sie einfach mit beginPath<\/b> einen neuen anlegen.<\/p>\n Bild 4 zeigt eine Zeichnung, in die das Bild einer Tulpe geladen wurde. Das ist natürlich kein eigenes Objekt, sondern schlicht in das HTML5<\/b>-Bitmap gerendert, weshalb es abschließend übermalt werden kann. Die Umsetzung dieses Vorgangs bereitete einiges Kopfzerbrechen. Zwar kennt der HTML5<\/b>-Grafikkontext die Methode drawImage<\/b>, die ein bestehendes Bild in den Canvas<\/b> kopiert und dabei auch noch positionieren und skalieren kann, doch als Bildquelle erwartet die Anweisung ein HTML-Bildobjekt<\/b> vom Type HTMLImg<\/b>! Wie erzeugen Sie ein solches aus einer Datei<\/p>\n Bild 4: Der zweite Datensatz des Formulars frmHTML5Draw in der Beispieldatenbank zeigt ein geladenes und übermaltes externes Bild <\/span><\/b><\/p>\n Die Ereignisprozedur beim Klick auf den Button Ext.Bild laden…<\/b> (cmdLoadPic<\/b>) löst das Rätsel. Sie ruft zunächst den Office-FileDialog<\/b> auf, über den Sie eine Bilddatei auswählen können. Dann lädt sie diese Datei über ein Open-Get-Close<\/b>-Konstrukt im Binärmodus in ein Byte-Array bin<\/b>. Der Rest der Prozedur steht in Listing 3.<\/p>\n Listing 3: Erzeugen eines HTML-Bildobjekts aus externer Datei<\/span><\/b><\/p>\n Ein neues HTML-Bild können Sie mithilfe der Methode createElement<\/b> und dem Parameter img<\/b> auf das Dokument oDoc<\/b> anlegen. Die Routine speichert einen Verweis darauf in der Variablen oImg<\/b>. Der Trick ist hierbei, dass dieses Bildobjekt im Dokument gar nicht angezeigt wird, weil es dazu erst dem Body<\/b> oder einem anderen Bereich mit appendChild<\/b> hinzugefügt werden müsste. Es existiert also nur im Speicher. Nun benötigen wir noch die Quelle des Bildobjekts, die unter HTML üblicherweise eine Datei darstellt, welche aus dem Dateisystem oder von einem Webserver geladen würde. Tatsächlich könnten Sie die Eigenschaft src<\/b> des Objekts oImg<\/b> direkt mit dem zuvor ausgewählten Dateipfad belegen. Leider passiert dann beim Aufruf von drawImage<\/b> rein gar nichts. Denn Microsoft unterbindet aus Sicherheitsgründen solche Cross-References<\/b> zwischen HTML5<\/b> und Dateisystem. <\/p>\n Wenig bekannt aber ist die Tatsache, dass Sie für ein HTML-Bildobjekt statt eines Dateipfads oder einer URL<\/b> auch einen Daten-String angeben können! Der muss, wie bereits im Beitrag zu den HTML5<\/b>-Diagrammen erläutert (siehe Stichwort toURLData<\/b>), in base64<\/b>-Kodierung vorliegen. Dies geschieht in der Zeile, die der Eigenschaft src<\/b> die Daten zuweist. Damit der Browser erkennt, dass es sich um Daten handelt, ist ein Header<\/b> voranzustellen, der sich aus dem Präfix data:<\/b> und dem MIME<\/b>-Typ zusammensetzt, gefolgt von der einzig erlaubten Kodierung base64<\/b>. In unserem Beispiel ist, nebenbei erwähnt, wegen des hier festgelegten MIME<\/b>-Typs image\/jpeg<\/b> nur das Laden von JPG<\/b>-Bilder erlaubt. <\/p>\n Die Konvertierung der Binärdaten im Byte-Array bin<\/b> übernimmt die Hilfsfunktion EncodeBase64<\/b> im Modul mdlCanvas<\/b>. Das einfache Dekodieren über ein XML<\/b>-Element lernten Sie schon im Vorgängerbeitrag kennen. Tatsächlich könnte man die entgegengesetzte Richtung ebenfalls über die XML<\/b>-Bibliothek vornehmen. Performanter ist aber eine API<\/b>-Funktion von Windows (CryptBinaryToString<\/b>), die genauso wenige Code-Zeilen erfordert. Listing 4 stellt die Hilfsfunktion dar, auf deren Aufbau wir an dieser Stelle nicht weiter eingehen. <\/p>\n Listing 4: Diese kurze Routine erzeugt aus einem Byte-Array einen base64-kodierten String per API<\/span><\/b><\/p>\n Nachdem dieser Daten-String dem Bildobjekt zugewiesen wurde, muss die Routine noch abwarten, bis es intern fertig gerendert ist, bevor auf das Objekt weitere Methoden angewandt werden. Dass passiert, ähnlich zum Browser, über eine Abfrage des Status in ReadyState<\/b>. Nur setzen Sie hier keine Konstante ein, sondern einen Status-String, der nach Abschluss des Renderns auf complete<\/b> steht.<\/p>\n Die Bildladeroutine liest nun Breite und Höhe des Bilds anhand seiner Eigenschaften Width<\/b> und Height<\/b> in die Variablen W<\/b> und H<\/b> ein. Diese Werte benötigen wir für das folgende drawImage<\/b>, das als Parameter die Quellbreite und -höhe des Bilds erwartet. Sie könnten ebenso einen Ausschnitt des Bilds transferieren! Da das Bild größer sein kann, als der Canvas<\/b> mit seinen 600×400<\/b> Pixel, folgt nun im Zweifel über Bedingungen eine Skalierung. Die Eigenschaften Width<\/b> und Height<\/b> des Bildobjekts müssen dazu lediglich auf neue Werte gesetzt werden. drawImage<\/b> übergeben Sie schließlich das Bildobjekt oImg<\/b>, die Koordinaten des Quellrechtecks (hier: 0,0<\/b>), die Quellausdehnung aus W<\/b> und H<\/b>, die Position, an der das Bild eingefügt werden soll (hier: x=1<\/b>, y=1<\/b>), und dann noch die gewünschte Breite und Höhe im Ziel. Das temporäre Bildobjekt oImg<\/b> wird nach dem Verlassen der Prozedur automatisch aus dem Speicher entfernt, weil es keinem HTML-Element<\/b> des Dokuments hinzugefügt wurde.<\/p>\n Wie Sie die HTML5<\/b>-Grafik in eine externe Datei exportieren erfuhren Sie im Beitrag HTML5 als Grafikkomponente<\/b>. Hier aber möchten wir die Zeichnungen in eine Tabelle abspeichern und auch wieder aus ihr laden, ohne das Dateisystem bemühen zu müssen. Das soll möglichst platzsparend geschehen. Der Code aus dem Beitrag Datenkompression leicht gemacht<\/b> hilft uns hierbei. Der Klick auf die Formularschaltfläche cmdSaveDB<\/b> (Bild speichern<\/b>) des Formulars überführt das HTML5<\/b>-Bild in das Feld BildOLE<\/b> der angebundenen Tabelle:<\/p>\n Je nach Status der beiden Checkboxen wird sFormat<\/b> auf ein unterschiedliches MIME<\/b>-Format gebracht. Die ausgelagerte Hilfsroutine CanvasPicToByte<\/b> erwartet einen Verweis auf das Canvas-Objekt <\/b>und eine Angabe zum gewünschten Format. Der dritte Parameter sagt als Boole-Wert, ob beim Speichern eine Datenkompression stattfinden soll. Die wesentlichen Zeilen der Routine, welche schließlich ein Byte-Array zurückgibt: <\/p>\n Die Methode toDataURL<\/b> des übergebenen Canvas erzeugt wieder einen base64<\/b>-String und speichert ihn in sData<\/b>. Um aus dem String ein Byte-Array zu machen kommt die Funktion StrConv<\/b> zum Einsatz. Dieses kann wiederum, falls Kompression angewiesen wurde, an die Prozedur CompressRTL<\/b> weitergeleitet werden, die exakt jener entspricht, die Sie in der Beispieldatenbank zum Beitrag Datenkompression leicht gemacht<\/b> finden. Soll nicht komprimiert werden, so erreicht ein verdoppeltes StrConv<\/b>, dass aus dem String ein korrektes Byte-Array entsteht, wobei dann abwechselnd die Parameter vbUnicode<\/b> und vbFromUnicode<\/b> eingesetzt werden. Von der Kompression über diese Methode brauchen Sie nicht allzu viel zu erwarten. Aber immerhin reduziert sich der Speicherbedarf mit ihr nach unseren Beobachtungen auf etwa das 1,5-fache.<\/p>\n Das HTML5<\/b>-Bild befindet sich nun in der Tabelle im Feld BildOLE<\/b>. Von dort soll es im Formular auch wieder geladen werden, wenn zu einem Datensatz gesprungen wird. Hier kehren wir zur Ereignisprozedur Form_Current<\/b> zurück, die ihrerseits die Timer<\/b>-Prozedur in Listing 1<\/b> aufruft. Dort haben wir den Teil zum Laden der Grafik aus der Tabelle unterschlagen und geben ihn hier in Listing 5 wieder. Ist das Feld BildOLE<\/b> nicht<\/b> leer, so erzeugt der Code ein temporäres HTML-Bildobjekt oImg<\/b>, das über drawImage<\/b> in den leeren Canvas geschrieben wird. Der Vorgang ist identisch zu dem, was bereits im Abschnitt Externe Bilddatei laden<\/b> besprochen wurde. Nur kommen die Binärdaten hier nicht aus einer Datei, sondern direkt aus der Tabelle. Da sie komprimiert vorliegen, müssen sie über die Hilfsfunktion DecompressRTL<\/b> erst dekomprimiert und per StrConv<\/b> wieder in einen String umgewandelt werden. Danach folgen noch einige Zeilen, die Formularelemente steuern. Das Label lblInfo<\/b> zur Ausgabe des Speicherbedarfs des Bilds wird mit der Rückgabe der Len<\/b>-Funktion belegt. In Abhängigkeit vom MIME<\/b>-Ausdruck, der im Header<\/b> des Source-Strings<\/b> ![\"Farbauswahldialog](\"..\/fileadmin\/_temp_\/2018_01\/ColorDialog.png\")
<\/p>\nTabelle als Grafikspeicher<\/h2>\n
![\"Die](\"..\/fileadmin\/_temp_\/2018_01\/tblBilderDraw.png\")
<\/p>\nVorgänge beim Laden und Anzeigen des Formulars<\/h2>\n
Me.TimerInterval = 100<\/pre>\n
Me!ctlWeb.Object.Navigate2 \"about:blank\"\r\n...\r\nForm_Timer<\/pre>\n
Me.TimerInterval = 0\r\nDo While<\/span> Me!ctlWeb.Object.ReadyState < 3\r\n DoEvents\r\nLoop<\/span><\/pre>\nSet<\/span> oDoc = Me!ctlWeb.Object.Document\r\noDoc.body.setAttribute \"bgColor\", \"#e0e0e0\"<\/pre>\nPrivate <\/span>WithEvents oDoc As <\/span>HTMLDocument\r\nPrivate <\/span>WithEvents oDiv As <\/span>HTMLDivElement\r\nPrivate <\/span>oCanvE As <\/span>IHTMLCanvasElement\r\nPrivate <\/span>CTX As <\/span>ICanvasRenderingContext2D<\/pre>\nPrivate Sub <\/span>Form_Timer()\r\n Dim <\/span>oElement As <\/span>IHTMLElement\r\n...\r\nSet<\/span> oDiv = oDoc.createElement(\"div1\")\r\noDiv.Id = \"div1\"\r\noDoc.body.appendChild oDiv\r\nSet<\/span> oCanvE = oDoc.createElement(\"canvas\")\r\noCanvE.Id = \"zeichnung\"\r\noCanvE.Width = 600: oCanvE.Height = 400\r\noDiv.appendChild oCanvE\r\nSet<\/span> CTX = oCanvE.getContext(\"2d\")\r\nWith<\/span> CTX\r\n .globalAlpha = 1\r\n .strokeStyle = 0\r\n .lineWidth = 1\r\n .FillStyle = \"#ffffff\"\r\n .fillRect 0, 0, 600, 400\r\n .strokeRect 0, 0, 600, 400\r\n .strokeStyle = ColorToStr(rColor.BackColor)\r\n .FillStyle = ColorToStr(rColorFill.BackColor)\r\n .shadowBlur = val(cbShadow.Value)\r\n .shadowColor = ColorToStr(rColorShadow.BackColor)\r\n .shadowOffsetX = .shadowBlur \/ 2\r\n .shadowOffsetY = .shadowBlur \/ 2\r\n .lineWidth = CSng(cbLineWidth.Value)\r\nEnd With<\/span>\r\n...\r\nEnd Sub<\/span><\/pre>\nZeichnen mit der Maus<\/h2>\n
Private Sub <\/span>oDiv_onmousedown()\r\n Set<\/span> oEvent = oDoc.parentWindow.event\r\n If <\/span>oEvent.Button = 1 Then<\/span>\r\n CTX.beginPath\r\n CTX.moveTo oEvent.offsetX, oEvent.OffsetY\r\n End If<\/span>\r\nEnd Sub<\/span>\r\nPrivate Sub <\/span>oDiv_onmousemove()\r\n Set<\/span> oEvent = oDoc.parentWindow.event\r\n If <\/span>oEvent.Button = 1 Then<\/span>\r\n CTX.lineTo oEvent.offsetX, oEvent.OffsetY\r\n CTX.stroke\r\n End If<\/span>\r\nEnd Sub<\/span>\r\nPrivate Sub <\/span>oDiv_onmouseup()\r\n Set<\/span> oEvent = oDoc.parentWindow.event\r\n If <\/span>oEvent.Button = 1 Then<\/span>\r\n cmdFill.Enabled = False<\/span>\r\n End If<\/span>\r\nEnd Sub<\/span><\/pre>\nDim <\/span>oEvent As <\/span>IHTMLEventObj<\/pre>\nPrivate Sub <\/span>cbLineWidth_AfterUpdate()\r\n CTX.lineWidth = CSng(cbLineWidth.Value)\r\nEnd Sub<\/span><\/pre>\nFigur füllen<\/h2>\n
Private Sub <\/span>cmdClosePath_Click()\r\n CTX.closePath\r\n CTX.stroke\r\n cmdFill.Enabled = True<\/span>\r\nEnd Sub<\/span><\/pre>\nPrivate Sub <\/span>cmdFill_Click()\r\n CTX.Fill\r\n CTX.beginPath\r\nEnd Sub<\/span><\/pre>\nExterne Bilddatei laden<\/h2>\n
![\"Der](\"..\/fileadmin\/_temp_\/2018_01\/frmDraw2.png\")
<\/p>\nPrivate Sub <\/span>cmdLoadPic_Click()\r\n Dim <\/span>oImg As <\/span>HTMLImg\r\n Dim <\/span>W As Long<\/span>, H As Long<\/span>\r\n Dim <\/span>bin() As Byte<\/span>\r\n ...\r\n Set<\/span> oImg = oDoc.createElement(\"img\")\r\n oImg.src = \"data:image\/jpeg;base64,\" & EncodeBase64(bin)\r\n Do\r\n DoEvents\r\n Loop<\/span> Until oImg.ReadyState = \"complete\"\r\n W = oImg.Width: H = oImg.Height\r\n If <\/span>oImg.Width > 600 Then<\/span>\r\n oImg.Height = oImg.Height * 600 \/ oImg.Width\r\n oImg.Width = 600\r\n End If<\/span>\r\n If <\/span>oImg.Height > 400 Then<\/span>\r\n oImg.Width = oImg.Width * 400 \/ oImg.Height\r\n oImg.Height = 400\r\n End If<\/span>\r\n CTX.drawImage oImg, 0, 0, W, H, 1, 1, oImg.Width, oImg.Height\r\nEnd Sub<\/span><\/pre>\nPrivate <\/span>Declare Function CryptBinaryToString Lib \"Crypt32\" Alias \"CryptBinaryToStringA\" (ByRef pbBinary As Byte<\/span>, _\r\n ByVal cbBinary As Long<\/span>, ByVal dwFlags As Long<\/span>, ByVal pszString As Long<\/span>, ByRef pcchString As Long<\/span>) As Long<\/span> \r\nFunction <\/span>EncodeBase64(bin() As Byte<\/span>) As String<\/span>\r\n Dim <\/span>binOut() As Byte<\/span>\r\n Dim <\/span>nSize As Long<\/span>\r\n If <\/span>CryptBinaryToString(bin(0), UBound<\/span>(bin) + 1, &H40000001, 0&, nSize) <> 0 Then<\/span>\r\n nSize = nSize * 2\r\n ReDim binOut(nSize - 1)\r\n If <\/span>CryptBinaryToString(bin(0), UBound<\/span>(bin) + 1, &H40000001, VarPtr(binOut(0)), nSize) <> 0 Then<\/span>\r\n EncodeBase64 = StrConv(binOut, vbUnicode)\r\n End If<\/span>\r\n End If<\/span>\r\nEnd Function<\/span><\/pre>\nAbspeichern und Laden der Grafik<\/h2>\n
Private Sub <\/span>cmdSaveDB_Click()\r\n Dim <\/span>sFormat As String<\/span>\r\n If <\/span>chkPNG.Value = True<\/span> Then<\/span>\r\n sFormat = \"image\/png\"\r\n Else<\/span>\r\n sFormat = \"image\/jpeg\"\r\n End If<\/span>\r\n Me!BildOLE.Value = CanvasPicToByte(oCanvE, sFormat, True<\/span>)\r\nEnd Sub<\/span><\/pre>\nFunction <\/span>CanvasPicToByte(oCanv As <\/span>IHTMLCanvasElement, _\r\n Optional<\/span> sType = \"image\/png\", _\r\n Optional<\/span> Compressed As Boolean<\/span> = True<\/span>) As Byte<\/span>() \r\n Dim <\/span>sData As String<\/span>\r\n Dim <\/span>quality As Variant<\/span>\r\n sData = oCanv.toDataURL(sType, quality)\r\n If <\/span>Compressed Then<\/span>\r\n CanvasPicToByte = CompressRTL(StrConv(sData, _\r\n vbFromUnicode))\r\n Else<\/span>\r\n CanvasPicToByte = StrConv(StrConv(sData, _\r\n vbUnicode), vbFromUnicode)\r\n End If<\/span><\/pre>\n