I am uploading an image and converting the canvas to base64. I am passing the base64 data to server using Ajax.
The above code is not working completely. It generates image but send a Black Image to Server. How I resolve that issue?
<canvas id="myCanvas" width="200" height="200"></canvas>
<button onclick="javascript:drawShapes();return false;">Draw Picture</button>
<input type="button" id="btnSave" name="btnSave" value="Save the canvas to server" />
<script type="text/Javascript" language="Javascript">
function loadImages(sources, callback) {
var images = {};
var loadedImages = 0;
var numImages = 0;
// get num of sources
for (var src in sources) {
numImages++;
}
for (var src in sources) {
images[src] = new Image();
images[src].onload = function () {
if (++loadedImages >= numImages) {
callback(images);
}
};
images[src].src = sources[src];
}
}
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
function drawShapes() {
var sources = {
darthVader: 'http://freevectorsite.com/wp-content/uploads/2013/09/Creative-stock-vector-background.jpg',
yoda: 'https://upload.wikimedia.org/wikipedia/commons/e/e9/Imgur_logo.svg'
};
loadImages(sources, function (images) {
context.drawImage(images.darthVader, 0, 0);
context.drawImage(images.yoda, 50, 50, 100, 104);
});
// var dataURL = canvas.toDataURL("image/png");
}
</script>
<script type="text/javascript">
$(function () {
$("#btnSave").click(function () {
var Pic = canvas.toDataURL("image/png");
$.ajax({
type: 'POST',
url: '111.aspx/UploadImage',
data: '{ "imageData" : "' + Pic + '" }',
contentType: 'application/json; charset=utf-8',
dataType: 'json',
success: function (msg) {
alert('Image saved successfully !');
}
});
});
});
</script>
[WebMethod()]
public static void UploadImage(string imageData)
{
string path = @"D:\";
string fileNameWitPath = path + "myimage.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();
}
}
}