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.
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.
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
MSDN Community Support
Please remember to click "Mark as Answer" the responses that resolved your issue.
If you have any compliments or complaints to MSDN Support, feel free to contact MSDNFSF@microsoft.com.
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
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 !');
}
});
});
});
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
MSDN Community Support
Please remember to click "Mark as Answer" the responses that resolved your issue.
If you have any compliments or complaints to MSDN Support, feel free to contact MSDNFSF@microsoft.com.
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.
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
MSDN Community Support
Please remember to click "Mark as Answer" the responses that resolved your issue.
If you have any compliments or complaints to MSDN Support, feel free to contact MSDNFSF@microsoft.com.
Member
12 Points
37 Posts
How to save Image in HTML5 canvas to Oracle database through javaScript and ASMX web service ?
Sep 29, 2018 09:04 AM|jackWyu|LINK
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.
Star
9671 Points
3077 Posts
Re: How to save Image in HTML5 canvas to Oracle database through javaScript and ASMX web service...
Oct 01, 2018 03:14 AM|Brando ZWZ|LINK
Hi jackWyu,
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
Please remember to click "Mark as Answer" the responses that resolved your issue.
If you have any compliments or complaints to MSDN Support, feel free to contact MSDNFSF@microsoft.com.
Member
12 Points
37 Posts
Re: How to save Image in HTML5 canvas to Oracle database through javaScript and ASMX web service...
Oct 02, 2018 10:59 AM|jackWyu|LINK
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.
All-Star
54498 Points
14111 Posts
Re: How to save Image in HTML5 canvas to Oracle database through javaScript and ASMX web service...
Oct 02, 2018 01:27 PM|mudassarkhan|LINK
Refer
Save digital signature in Database and display in ASP.Net GridView using C# and VB.Net
Blog: ASPSnippets | Forum: ASPForums | Company: Excelasoft
Member
12 Points
37 Posts
Re: How to save Image in HTML5 canvas to Oracle database through javaScript and ASMX web service...
Oct 03, 2018 04:15 AM|jackWyu|LINK
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.
Star
9671 Points
3077 Posts
Re: How to save Image in HTML5 canvas to Oracle database through javaScript and ASMX web service...
Oct 03, 2018 05:57 AM|Brando ZWZ|LINK
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
Please remember to click "Mark as Answer" the responses that resolved your issue.
If you have any compliments or complaints to MSDN Support, feel free to contact MSDNFSF@microsoft.com.
Member
12 Points
37 Posts
Re: How to save Image in HTML5 canvas to Oracle database through javaScript and ASMX web service...
Oct 03, 2018 06:34 AM|jackWyu|LINK
Actually Image from Video is captured through below code that I have already mentioned.
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.
Star
9671 Points
3077 Posts
Re: How to save Image in HTML5 canvas to Oracle database through javaScript and ASMX web service...
Oct 03, 2018 07:13 AM|Brando ZWZ|LINK
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
Please remember to click "Mark as Answer" the responses that resolved your issue.
If you have any compliments or complaints to MSDN Support, feel free to contact MSDNFSF@microsoft.com.
Member
12 Points
37 Posts
Re: How to save Image in HTML5 canvas to Oracle database through javaScript and ASMX web service...
Oct 04, 2018 09:36 AM|jackWyu|LINK
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.