Canvas in Datenbank (mittels vb code und JavaScript in einer ASP.NET Anwendung) speichern.

  • VB.NET (ASP)

    Canvas in Datenbank (mittels vb code und JavaScript in einer ASP.NET Anwendung) speichern.

    Hallo ihr Lieben,

    ich beschreibe euch mal kurz was ich machen möchte/muss.... :)

    Also, ich habe ein Asp.net Projekt, geschrieben in vb und ein wenig JavaScript. Da ich eine händische Unterschrift vom Kunden brauche, habe ich ein Canvas erstellt.

    Quellcode

    1. <div id="canvasDiv" runat="server">
    2. <canvas id="myCanvas" class="canvasStandard"" aria-multiline="True" ></canvas>
    3. </div>
    4. <button onclick="javascript:clearArea();return false;">Löschen</button>
    5. "Stiftdicke: "
    6. <select id="selWidth">
    7. <option value="1">1</option>
    8. <option value="3" selected="selected">3</option>
    9. </select>
    11. "Farbe: "
    12. <select id="selColor">
    13. <option value="black" selected="selected">black</option>
    14. <option value="blue">blue</option>
    15. </select>


    DIe Canvas Klasse sieht so aus:

    Quellcode

    1. var mousePressed = false;
    2. var lastX, lastY;
    3. var ctx;
    5. function initialize() {
    6. ctx = document.getElementById('myCanvas').getContext("2d");
    8. $('#myCanvas').mousedown(function (e) {
    9. mousePressed = true;
    10. Draw(e.pageX - $(this).offset().left, e.pageY - $(this).offset().top, false);
    11. });
    13. $('#myCanvas').mousemove(function (e) {
    14. if (mousePressed) {
    15. Draw(e.pageX - $(this).offset().left, e.pageY - $(this).offset().top, true);
    16. }
    17. });
    19. $('#myCanvas').mouseup(function (e) {
    20. mousePressed = false;
    21. });
    23. $('#myCanvas').mouseleave(function (e) {
    24. mousePressed = false;
    25. });
    26. }
    28. function Draw(x, y, isDown) {
    29. if (isDown) {
    30. ctx.beginPath();
    31. ctx.strokeStyle = $('#selColor').val();
    32. ctx.lineWidth = $('#selWidth').val();
    33. ctx.lineJoin = "round";
    34. ctx.moveTo(lastX, lastY);
    35. ctx.lineTo(x, y);
    36. ctx.closePath();
    37. ctx.stroke();
    38. }
    39. lastX = x;
    40. lastY = y;
    41. }
    43. function clearArea() {
    44. // Use the identity matrix while clearing the canvas
    45. ctx.setTransform(1, 0, 0, 1, 0, 0);
    46. ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
    47. }
    49. function saveImage() {
    50. var image;
    51. $("#btnVertragKuendigen").click(function () {
    53. image = document.getElementById("myCanvas").toDataURL("image/png");
    54. image = image.replace('data:image/png;base64,', '');
    56. $.ajax({
    57. type: 'POST',
    58. url: "../../Home/UploadImage",
    59. data: '{ "imageData" : "' + image + '" }',
    60. contentType: 'application/json; charset=utf-8',
    61. dataType: 'json',
    62. success: function (msg) {
    63. alert('Image saved successfully !');
    64. }
    65. });
    66. });
    67. }


    So, nun mein Problem, ich möchte das Canvas binär umwandeln, um es in die Mssql Datenbank zu speichern, so gibt es mir der Chef vor. Habe ihm auch schon empfohlen das Image normal zu speichern und nur den Pfad in die Datenbank zu speichern, möchte er nicht. Die Umwandlung steht schon in der Klasse Canvas in der Methode saveImage().
    Nun meine Fragen:
    1. Ich würde das umgewandelte Image gerne in eine Textbox die nicht sichtbar ist speichern. Wie mach ich das am Besten? Im asp code oder mit js?
    2. Der Code für das Speichern des Canvas ist mir ziemlich unverständlich, wäre jemand bereit kurz mal zu erklären was da passiert?
    3. Muss ich noch irgend etwas anderes beachten? Übersehe ich irgendwas wichtiges?
    4. Achso, ich möchte das Image nicht auf dem Filesystem speichern, sondern wenn es geht, gleich auf der Datenbank..
    Am wichtigsten wären mir die Zusammenhänge, da ich vorher noch nicht so viel mit dem normalen Asp.net gearbeitet habe, beziehe ich viel Code aus dem Netz oder von Kollegen, das Meiste davon verstehe ich, hier bin ich irgendwie gerade an einer Grenze angelangt. Ich würde gerne verstehen, damit ich das nächste mal selbst und ohne Hilfe etwas Neues programmieren kann.

    Vielen Dank

    Taraxacuma

Facebook
Telefonspende