locked
How to save Image in HTML5 canvas to Oracle database through javaScript and ASMX web service ? RRS feed

  • Question

  • User-1911864377 posted

    Hello,

    I have a web page (HTML5) where a picture is present inside a canvas. On button click I (through jQuery/javaScript) I need to save the Image to oracle database via ASMX web service. Please help how to achieve this.

    Saturday, September 29, 2018 9:04 AM

All replies

  • User283571144 posted

    Hi jackWyu,

    I have a web page (HTML5) where a picture is present inside a canvas. On button click I (through jQuery/javaScript) I need to save the Image to oracle database via ASMX web service. Please help how to achieve this.

    According to your description, I suggest you could firstly use jquery toDataURL to convert the canvas to image/png format.

    Then we could use ajax to send this image to web method(asmx) in code-behind.

    At last we could save the image data into database.

    More details, you could refer to below codes:

    Notice:Since I don't contain the oracle database, below demo save the image to the file folder, you could also store the image path to the database.

    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="GetCanvasFromClientToServer.aspx.cs" Inherits="EmptyWebFormTest.GetCanvasFromClientToServer" %>
    
    <!DOCTYPE html>
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
        <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.4.2.min.js" type="text/javascript"></script>
        <script>
            function drawShapes() {
    
                var canvas = document.getElementById("SigCnv");
    
                var context = canvas.getContext("2d");
    
                context.fillStyle = "Blue";
    
                context.fillRect(0, 0, 200, 200);
    
                context.beginPath();
    
                context.lineWidth = "4";
    
                context.strokeStyle = "Green";
    
                context.fillStyle = "Yellow";
    
                context.arc(150, 100, 50, 20, Math.PI * 2, false);
    
                context.stroke();
    
                context.fill();
    
            }
        </script>
    </head>
    <body onload="drawShapes()">
        <form id="form1" runat="server">
            <div>
                <canvas id="SigCnv" name="SigCnv" width="250" height="50" style="border: solid;"></canvas>
                <input type="button" id="btnSave" name="btnSave" value="Save the canvas to server" />
                <script type="text/javascript">
    
                    // Send the canvas image to the server.
    
                    $(function () {
                        $("#btnSave").click(function () {
                            var image = document.getElementById("SigCnv").toDataURL("image/png");
                            image = image.replace('data:image/png;base64,', '');
                            $.ajax({
                                type: 'POST',
                                url: 'GetCanvasFromClientToServer.aspx/UploadImage',
                                data: '{ "imageData" : "' + image + '" }',
                                contentType: 'application/json; charset=utf-8',
                                dataType: 'json',
                                success: function (msg) {
                                    alert('Image saved successfully !');
                                }
                            });
                        });
                    });
                </script>
            </div>
        </form>
    </body>
    </html>

    Code-behind:

    using System;
    using System.Collections.Generic;
    using System.IO;
    using System.Linq;
    using System.Web;
    using System.Web.Services;
    using System.Web.UI;
    using System.Web.UI.WebControls;
    
    namespace EmptyWebFormTest
    {
        public partial class GetCanvasFromClientToServer : System.Web.UI.Page
        {
            protected void Page_Load(object sender, EventArgs e)
            {
    
            }
    
            [WebMethod()]
            public static void UploadImage(string imageData)
            {
                //Here you could directly write the logic to store the base64 string to oracle database.
                //Since I don't contain the oracle database, I direclty save the image to the file folder, you could also store the image path to the database.
    
                string fileNameWitPath = @"D:\" + DateTime.Now.ToString().Replace("/", "-").Replace(" ", "- ").Replace(":", "") + ".png";
                using (FileStream fs = new FileStream(fileNameWitPath, FileMode.Create))
                {
                    using (BinaryWriter bw = new BinaryWriter(fs))
    
                    {
                        byte[] data = Convert.FromBase64String(imageData);
                        bw.Write(data);
                        bw.Close();
                    }
                }
            }
        }
    }

    Result:

    Best Regards,

    Brando

    Monday, October 1, 2018 3:14 AM
  • User-1911864377 posted

    Thanks a lot for your reply. But my requirement is a little bit different. 

    On a mobile device I need to access front camera of the user and as the app opens his video should be displayed in a video HTML element. On a button press I need to capture his image in the page and at the same time I need to store it in the server. For that I have done like this 

    <video id="video" width="640" height="480" autoplay></video>
                    <button id="snap">Snap Photo</button>
                    <canvas id="canvas" width="640" height="480"></canvas>

    I have modified by code as per your post as below but blank Image is stored in the system.

     $(document).ready(function () {
            
                var video = document.getElementById('video');
    
                // Get access to the camera!
                if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
                    // Not adding `{ audio: true }` since we only want video now
                    navigator.mediaDevices.getUserMedia({ video: true }).then(function (stream) {
                        video.src = window.URL.createObjectURL(stream);
                        video.play();
                    });
                   
                }
    
                // Elements for taking the snapshot
                var canvas = document.getElementById('canvas');
                var context = canvas.getContext('2d');
                var video = document.getElementById('video');           
    
                // Trigger photo take
                document.getElementById("snap").addEventListener("click", function () {
                    context.drawImage(video, 0, 0, 640, 480);
                    var image = document.getElementById('canvas').toDataURL('image/png');
                    image = image.replace('data:image/png;base64,', '');
                    $.ajax({
                        type: 'POST',
                        url: 'GetCanvasFromClientToServer.aspx/UploadImage',
                        data: '{ "imageData" : "' + image + '" }',
                        contentType: 'application/json; charset=utf-8',
                        dataType: 'json',
                        success: function (msg) {
                            alert('Image saved successfully !');
                        }
                    });
                });
            });

    Please help me how to capture Image and save it.

    Tuesday, October 2, 2018 10:59 AM
  • User-1911864377 posted

    This was not much helpful. I want to save image which is rendered in html page to database through javaScript/jQuery and ASMX Web service.

    Wednesday, October 3, 2018 4:15 AM
  • User283571144 posted

    Hi jackWyu,

    In my opinion, your issue now is about how to capture the image from the video into canvas not "save Image in HTML5 canvas to Oracle database through javaScript and ASMX web service".

    I suggest you could start a new thread to ask about this question and mark the right answer in this thread, this will other folks who faces the same issue to be more easily search the issue.

    Thank you very much.

    Brando

    Wednesday, October 3, 2018 5:57 AM
  • User-1911864377 posted

    Hi jackWyu,

    In my opinion, your issue now is about how to capture the image from the video into canvas not "save Image in HTML5 canvas to Oracle database through javaScript and ASMX web service".

    Actually Image from Video is captured through below code that I have already mentioned.

    context.drawImage(video, 0, 0, 640, 480)

    Picture is captured in canvas from the video, but not able to save as per your suggestion.

    Can you give some work around to solve this.

    Wednesday, October 3, 2018 6:34 AM
  • User283571144 posted

    Hi jackWyu,

    According to your description and codes, I have created a test demo on my side, it works well.

    I suggest you could use F12 develop tool's console to see what is the error message.

    Codes as below:

    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="GetCanvasFromClientToServer.aspx.cs" Inherits="EmptyWebFormTest.GetCanvasFromClientToServer" %>
    
    <!DOCTYPE html>
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
        <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.4.2.min.js" type="text/javascript"></script>
     
    </head>
    <body onload="drawShapes()">
        <form id="form1" runat="server">
            <div>
                 <input type="button" id="capture" name="btnSave" value="capture" />
                <canvas id="Cap" name="Cap" width="250" height="50" style="border: solid;"></canvas>
                <input type="button" id="btnSave" name="btnSave" value="Save the canvas to server" />
                <video src="oceans.mp4" controls="controls" id="video" />
                   <br />
                <script type="text/javascript">
                    // Send the canvas image to the server.
                    $(function () {
                        var video = document.getElementById('video'); 
                // Elements for taking the snapshot
                var canvas = document.getElementById('Cap');
                var context = canvas.getContext('2d');
     
                        $("#btnSave").click(function () {
                             context.drawImage(video, 0, 0, 640, 480);
                            var image = document.getElementById("Cap").toDataURL("image/jpg");
                            image = image.replace('data:image/png;base64,', '');
                            $.ajax({
                                type: 'POST',
                                url: 'GetCanvasFromClientToServer.aspx/UploadImage',
                                data: '{ "imageData" : "' + image + '" }',
                                contentType: 'application/json; charset=utf-8',
                                dataType: 'json',
                                success: function (msg) {
                                    alert('Image saved successfully !');
                                }
                            });
                        });
                    });
                </script>
            </div>
        </form>
    </body>
    </html>

    Result:

    Best Regards,

    Brando

    Wednesday, October 3, 2018 7:13 AM
  • User-1911864377 posted

    Getting below error when using F12

    GetCanvasFromClientToServer.aspx/UploadImage:1 Failed to load resource: the server responded with a status of 500 (Internal Server Error)

    Although GetCanvasFromClientToServer is well defined and it is working fine for still images that you draw in your initial posts.

    Please suggest any solution.

    Thursday, October 4, 2018 9:36 AM